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;   
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. }