13518219792
网站建设资讯

NEWS

网站建设资讯

怎么用纯css3实现的发光屏幕旋转特效

这篇文章主要讲解了“怎么用纯css3实现的发光屏幕旋转特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用纯css3实现的发光屏幕旋转特效”吧！

十年专注成都网站制作，成都企业网站定制，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都企业网站定制,高端网页制作,对雨棚定制等多个方面，拥有丰富的网站运维经验。

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

怎么用纯css3实现的发光屏幕旋转特效

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  1.   

  2.     

  

css3代码：

CSS Code复制内容到剪贴板

  1. *{   

  2.     margin: 0;   

  3.     padding: 0;   

  4. }   

  5. *,   

  6. *:before,   

  7. *:after {   

  8.   -webkit-box-sizing: border-box;   

  9.      -moz-box-sizing: border-box;   

  10.           box-sizing: border-box;   

  11. }   

  12. html,body{   

  13.     height: 100%;   

  14. }   

  15. html{   

  16.     background-color: #1d1d1d;   

  17. }   

  18. body{   

  19.     position: relative;   

  20.     margin: 0;   

  21.     padding: 0;   

  22.   transform-style: preserve-3d;   

  23.   

  24.   -webkit-perspective: 500px;   

  25.           perspective: 500px;   

  26. }   

  27.   

  28. /*Screen*/  

  29. .screen{   

  30.     position: absolute;   

  31.     top: 50%;   

  32.     left: 50%;     

  33.     width: 320px;   

  34.     height: 210px;   

  35.     margin-top: -105px;   

  36.     margin-left: -160px;   

  37.   

  38.     border-radius: 8px;   

  39.     box-shadow: 0 0 80px #0caba8;   

  40.     overflow: hidden;   

  41.     z-index: 100000;   

  42.   

  43.     -webkit-animation: screenMove01 2s,   

  44.                        boxShine     2.5s 2s infinite alternate ,   

  45.                        screenMove02 5s infinite alternate linear;   

  46.   

  47.        -moz-animation: screenMove01 2s,   

  48.                        boxShine     2.5s 2s infinite alternate ,   

  49.                        screenMove02 5s infinite alternate linear;   

  50.   

  51.          -o-animation: screenMove01 2s,   

  52.                        boxShine     2.5s 2s infinite alternate ,   

  53.                        screenMove02 5s infinite alternate linear;   

  54.   

  55.             animation: screenMove01 2s,   

  56.                        boxShine     2.5s 2s infinite alternate ,   

  57.                        screenMove02 5s infinite alternate linear;   

  58. }   

  59. .screen::before{   

  60.     display: block;   

  61.     content:"";   

  62.     position: absolute;   

  63.     top: 0;   

  64.     left: 0;   

  65.     width: 320px;   

  66.     height: 210px;   

  67.   

  68.     border-width: 5px;   

  69.     border-style: solid;   

  70.   border-image: -webkit-linear-gradient(to bottombottom, 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;    

  71.   border-image:    -moz-linear-gradient(to bottombottom, 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;    

  72.   border-image:      -o-linear-gradient(to bottombottom, 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;    

  73.   border-image:         linear-gradient(to bottombottom, 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;    

  74. }   

  75. .screen::after{   

  76.     display: block;   

  77.     content:"";   

  78.     position: absolute;   

  79.     top: 3px;   

  80.     left: 3px;   

  81.     width: 314px;   

  82.     height: 204px;   

  83.   

  84.     border: 3px solid #1d1d1d;   

  85.     border-color:rgba(29,29,29,0.9);   

  86.     border-radius: 5px;   

  87.     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%);   

  88.   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%);   

  89.   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%);   

  90.   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%);   

  91.   

  92.   

  93.     -webkit-background-size: 300% 300%;   

  94.      -moz-background-size: 300% 300%;   

  95.          -o-background-size: 300% 300%;   

  96.       -ms-background-size: 300% 300%;   

  97.             background-size: 300% 300%;   

  98.   

  99.   

  100.     -webkit-animation: bgShine 5s  infinite alternate linear;   

  101.        -moz-animation: bgShine 5s  infinite alternate linear;   

  102.            -o-animation: bgShine 5s  infinite alternate linear;   

  103.               animation: bgShine 5s  infinite alternate linear;   

  104. }   

  105. /**/  

  106.   

  107.   

  108.   

  109. /*Animation*/  

  110.   

  111. /*screenMove01*/  

  112. @-webkit-keyframes screenMove01 {   

  113.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  114.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  115. }   

  116. @-moz-keyframes screenMove01 {   

  117.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  118.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  119. }   

  120. @-o-keyframes screenMove01 {   

  121.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  122.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  123. }   

  124. @keyframes screenMove01 {   

  125.     0%   {opacity: 0; top: 100%; transform: rotateY(0deg);}   

  126.     100% {opacity: 1; top: 50%;  transform: rotateY(-30deg);}   

  127. }   

  128. /**/  

  129.   

  130.   

  131.   

  132. /*screenMove02*/  

  133. @-webkit-keyframes screenMove02 {   

  134.     0%   {transform: rotateY(-30deg);}   

  135.     100% {transform: rotateY(30deg);}   

  136. }   

  137. @-moz-keyframes screenMove02 {   

  138.     0%   {transform: rotateY(-30deg);}   

  139.     100% {transform: rotateY(30deg);}   

  140. }   

  141. @-o-keyframes screenMove02 {   

  142.     0%   {transform: rotateY(-30deg);}   

  143.     100% {transform: rotateY(30deg);}   

  144. }   

  145. @keyframes screenMove02 {   

  146.     0%   {transform: rotateY(-30deg);}   

  147.     100% {transform: rotateY(30deg);}   

  148. }   

  149. /**/  

  150.   

  151.   

  152.   

  153. /*box shine*/  

  154. @-webkit-keyframes boxShine {   

  155.     0%   {box-shadow: 0 0 50px #0caba8;}   

  156.     100% {box-shadow: 0 0 200px #0caba8;}   

  157. }   

  158. @-moz-keyframes boxShine {   

  159.     0%   {box-shadow: 0 0 50px #0caba8;}   

  160.     100% {box-shadow: 0 0 200px #0caba8;}   

  161. }   

  162. @-o-keyframes boxShine {   

  163.     0%   {box-shadow: 0 0 50px #0caba8;}   

  164.     100% {box-shadow: 0 0 200px #0caba8;}   

  165. }   

  166. @keyframes boxShine {   

  167.     0%   {box-shadow: 0 0 50px #0caba8;}   

  168.     100% {box-shadow: 0 0 200px #0caba8;}   

  169. }   

  170. /**/  

  171.   

  172.   

  173.   

  174. /*bg shine*/  

  175. @-webkit-keyframes bgShine {   

  176.     0%   {-webkit-background-size: 300% 300%;}   

  177.     100% {-webkit-background-size: 100% 100%;}   

  178. }   

  179. @-moz-keyframes bgShine {   

  180.     0%   {-moz-background-size: 300% 300%;}   

  181.     100% {-moz-background-size: 100% 100%;}   

  182. }   

  183. @-o-keyframes bgShine {   

  184.     0%   {-o-background-size: 300% 300%;}   

  185.     100% {-o-background-size: 100% 100%;}   

  186. }   

  187. @keyframes bgShine {   

  188.     0%   {background-size: 300% 300%;}   

  189.     100% {background-size: 100% 100%;}   

  190. } 

感谢各位的阅读，以上就是“怎么用纯css3实现的发光屏幕旋转特效”的内容了，经过本文的学习后，相信大家对怎么用纯css3实现的发光屏幕旋转特效这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


文章名称：怎么用纯css3实现的发光屏幕旋转特效
标题路径：http://njwzjz.com/article/iggojo.html

其他资讯