今天给大家带来一款纯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%;}}