今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效，效果图如下：

　　实现的代码。

　　html代码：

XML/HTML Code 复制内容到剪贴板 <div class="screen">        </ div >   

　　css3代码：

CSS 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 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 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 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 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%;}    }