纽扣扣错了可以重扣，但人生不行，除非你选对了人生道路。早上起床你一句早安，晚上睡觉一句晚安。对我来说这就是极有意义的一天。
今天给大家带来一款纯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*/
- .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;
- }
- /**/
- /*Animation*/
- /*screenMove01*/
- @-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);}
- }
- /**/
- /*screenMove02*/
- @-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);}
- }
- /**/
- /*boxshine*/
- @-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;}
- }
- /**/
- /*bgshine*/
- @-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%;}
- }
到此这篇关于css3实例好代码教程 一款纯css3如何实现的发光屏幕旋转特效就介绍到这了。害怕失败的人将一事无成。过去所有名人都经受了一个又一个的失败。但是，他们在失败的时候不是沮丧气馁，而是不屈的拼搏，最后取得了胜利。青春时代的真正失败，毋宁说是逃避艰苦的斗争，没有目标，懦弱潦倒。艰苦奋斗后的失败，是人生的宝贵财富。期望你们不好害怕失败，勇敢地度过青春。更多相关css3实例好代码教程 一款纯css3如何实现的发光屏幕旋转特效内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
