css3实例教程 一款纯css3实现的发光屏幕旋转特效

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

　　实现的代码。

　　html代码：

1. <div class="screen">  
2.     </div>  

　　css3代码：

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;