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

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

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

　　实现的代码。

　　html代码：

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

1. <div class="screen">  

2.     </div>  

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

191. 
     

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