今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效，效果图如下：
在线预览 源码下载
实现的代码。
html代码：
css3代码：
*{ 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%;}}