A luminous screen rotation special effect implemented in pure css3_html/css_WEB-ITnose

Today I bring you a luminous screen rotation special effect implemented purely in CSS3. The screen is implemented with luminous rotation special effects by pure CSS3. The rendering is as follows:

Online preview Source code download

The code implemented.

html code:

 <div class="screen">    </div>

css3 code:

*{    margin: 0;    padding: 0;}*,*:before,*:after {  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;}html,body{    height: 100%;}html{    background-color: #1d1d1d;}body{    position: relative;    margin: 0;    padding: 0;  transform-style: preserve-3d;  -webkit-perspective: 500px;          perspective: 500px;}/*Screen*/.screen{    position: absolute;    top: 50%;    left: 50%;        width: 320px;    height: 210px;    margin-top: -105px;    margin-left: -160px;    border-radius: 8px;    box-shadow: 0 0 80px #0caba8;    overflow: hidden;    z-index: 100000;    -webkit-animation: screenMove01 2s,                       boxShine     2.5s 2s infinite alternate ,                       screenMove02 5s infinite alternate linear;       -moz-animation: screenMove01 2s,                       boxShine     2.5s 2s infinite alternate ,                       screenMove02 5s infinite alternate linear;         -o-animation: screenMove01 2s,                       boxShine     2.5s 2s infinite alternate ,                       screenMove02 5s infinite alternate linear;            animation: screenMove01 2s,                       boxShine     2.5s 2s infinite alternate ,                       screenMove02 5s infinite alternate linear;}.screen::before{    display: block;    content:"";    position: absolute;    top: 0;    left: 0;    width: 320px;    height: 210px;    border-width: 5px;    border-style: solid;  border-image: -webkit-linear-gradient(to bottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;   border-image:    -moz-linear-gradient(to bottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;   border-image:      -o-linear-gradient(to bottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1;   border-image:         linear-gradient(to bottom, rgba(29,186,180,1) 0%, rgba(126,252,247,1) 26%, rgba(227,253,252,1) 30%, rgba(126,252,247,1) 36%, rgba(29,186,180,1) 52%, rgba(29,186,180,1) 74%, rgba(164,247,244,1) 91%, rgba(29,186,180,1) 100%) 1; }.screen::after{    display: block;    content:"";    position: absolute;    top: 3px;    left: 3px;    width: 314px;    height: 204px;    border: 3px solid #1d1d1d;    border-color:rgba(29,29,29,0.9);    border-radius: 5px;    background: -webkit-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);  background:    -moz-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);  background:      -o-linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);  background:         linear-gradient( 135deg, rgba(29,186,180,1) 0%, rgba(227,253,252,1) 17%, rgba(227,253,252,1) 25%, rgba(42,197,191,1) 48%, rgba(126,252,247,1) 93%, rgba(29,186,180,1) 100%);    -webkit-background-size: 300% 300%;     -moz-background-size: 300% 300%;         -o-background-size: 300% 300%;      -ms-background-size: 300% 300%;            background-size: 300% 300%;    -webkit-animation: bgShine 5s  infinite alternate linear;       -moz-animation: bgShine 5s  infinite alternate linear;           -o-animation: bgShine 5s  infinite alternate linear;              animation: bgShine 5s  infinite alternate linear;}/**//*Animation*//*screenMove01*/@-webkit-keyframes screenMove01 {    0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}    100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}}@-moz-keyframes screenMove01 {    0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}    100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}}@-o-keyframes screenMove01 {    0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}    100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}}@keyframes screenMove01 {    0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}    100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}}/**//*screenMove02*/@-webkit-keyframes screenMove02 {    0%   {transform: rotateY(-30deg);}    100% {transform: rotateY(30deg);}}@-moz-keyframes screenMove02 {    0%   {transform: rotateY(-30deg);}    100% {transform: rotateY(30deg);}}@-o-keyframes screenMove02 {    0%   {transform: rotateY(-30deg);}    100% {transform: rotateY(30deg);}}@keyframes screenMove02 {    0%   {transform: rotateY(-30deg);}    100% {transform: rotateY(30deg);}}/**//*box shine*/@-webkit-keyframes boxShine {    0%   {box-shadow: 0 0 50px #0caba8;}    100% {box-shadow: 0 0 200px #0caba8;}}@-moz-keyframes boxShine {    0%   {box-shadow: 0 0 50px #0caba8;}    100% {box-shadow: 0 0 200px #0caba8;}}@-o-keyframes boxShine {    0%   {box-shadow: 0 0 50px #0caba8;}    100% {box-shadow: 0 0 200px #0caba8;}}@keyframes boxShine {    0%   {box-shadow: 0 0 50px #0caba8;}    100% {box-shadow: 0 0 200px #0caba8;}}/**//*bg shine*/@-webkit-keyframes bgShine {    0%   {-webkit-background-size: 300% 300%;}    100% {-webkit-background-size: 100% 100%;}}@-moz-keyframes bgShine {    0%   {-moz-background-size: 300% 300%;}    100% {-moz-background-size: 100% 100%;}}@-o-keyframes bgShine {    0%   {-o-background-size: 300% 300%;}    100% {-o-background-size: 100% 100%;}}@keyframes bgShine {    0%   {background-size: 300% 300%;}    100% {background-size: 100% 100%;}}