今天小编跟大家讲解下有关css3实例教程 一款纯css3实现的发光屏幕旋转特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3实例教程 一款纯css3实现的发光屏幕旋转特效 的相关资料，希望小伙伴们看了有所帮助。
今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效 效果图如下：
实现的代码。
html代码：
XML/HTML Code复制内容到剪贴板 <divclass="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{ position:absolute; top:50%; left:50%; width:320px; height:210px; margin-top:-105px; margin-left:-160px; border-radius:8px; box-shadow:0080px#0caba8; overflow:hidden; z-index:100000; -webkit-animation:screenMove012s, boxShine2.5s2sinfinitealternate, screenMove025sinfinitealternatelinear; -moz-animation:screenMove012s, boxShine2.5s2sinfinitealternate, screenMove025sinfinitealternatelinear; -o-animation:screenMove012s, boxShine2.5s2sinfinitealternate, screenMove025sinfinitealternatelinear; animation:screenMove012s, boxShine2.5s2sinfinitealternate, screenMove025sinfinitealternatelinear; } .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(tobottombottom,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(tobottombottom,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(tobottombottom,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(tobottombottom,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:3pxsolid#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:bgShine5sinfinitealternatelinear; -moz-animation:bgShine5sinfinitealternatelinear; -o-animation:bgShine5sinfinitealternatelinear; animation:bgShine5sinfinitealternatelinear; } @-webkit-keyframesscreenMove01{ 0%{opacity:0;top:100%;transform:rotateY(0deg);} 100%{opacity:1;top:50%;transform:rotateY(-30deg);} } @-moz-keyframesscreenMove01{ 0%{opacity:0;top:100%;transform:rotateY(0deg);} 100%{opacity:1;top:50%;transform:rotateY(-30deg);} } @-o-keyframesscreenMove01{ 0%{opacity:0;top:100%;transform:rotateY(0deg);} 100%{opacity:1;top:50%;transform:rotateY(-30deg);} } @keyframesscreenMove01{ 0%{opacity:0;top:100%;transform:rotateY(0deg);} 100%{opacity:1;top:50%;transform:rotateY(-30deg);} } @-webkit-keyframesscreenMove02{ 0%{transform:rotateY(-30deg);} 100%{transform:rotateY(30deg);} } @-moz-keyframesscreenMove02{ 0%{transform:rotateY(-30deg);} 100%{transform:rotateY(30deg);} } @-o-keyframesscreenMove02{ 0%{transform:rotateY(-30deg);} 100%{transform:rotateY(30deg);} } @keyframesscreenMove02{ 0%{transform:rotateY(-30deg);} 100%{transform:rotateY(30deg);} } @-webkit-keyframesboxShine{ 0%{box-shadow:0050px#0caba8;} 100%{box-shadow:00200px#0caba8;} } @-moz-keyframesboxShine{ 0%{box-shadow:0050px#0caba8;} 100%{box-shadow:00200px#0caba8;} } @-o-keyframesboxShine{ 0%{box-shadow:0050px#0caba8;} 100%{box-shadow:00200px#0caba8;} } @keyframesboxShine{ 0%{box-shadow:0050px#0caba8;} 100%{box-shadow:00200px#0caba8;} } @-webkit-keyframesbgShine{ 0%{-webkit-background-size:300%300%;} 100%{-webkit-background-size:100%100%;} } @-moz-keyframesbgShine{ 0%{-moz-background-size:300%300%;} 100%{-moz-background-size:100%100%;} } @-o-keyframesbgShine{ 0%{-o-background-size:300%300%;} 100%{-o-background-size:100%100%;} } @keyframesbgShine{ 0%{background-size:300%300%;} 100%{background-size:100%100%;} }来源：爱蒂网
