怎么用css3制作元旦雪人動畫特效

這篇文章主要介紹“怎么用css3制作元旦雪人動畫特效”，在日常操作中，相信很多人在怎么用css3制作元旦雪人動畫特效問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用css3制作元旦雪人動畫特效”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　在圣誕節或者是元旦的時候，愛編程小編給大家分享一款純css3實現的雪人動畫特效。該實例實現一個雪人跳動的特效，效果圖如下：

　　實現的代碼。

　　html代碼：

XML/HTML Code復制內容到剪貼板

1. <span class="text">lolwut<small>-@rsmswlln</small></span>  

2.    <div class="body">  

3.        <div class="hat">  

4.            <div class="ribbon">  

5.            </div>  

6.        </div>  

7.        <div class="face">  

8.        </div>  

9.        <div class="scarf">  

10.        </div>  

11.        <div class="right-arm">  

12.            <div class="hand">  

13.            </div>  

14.        </div>  

15.        <div class="left-arm">  

16.            <div class="hand">  

17.            </div>  

18.        </div>  

19.    </div>  

20.    <div class="puddle">  

21.    </div>  

　　css代碼：

CSS Code復制內容到剪貼板

1. body {   

2.   background: #c0392b;   

3. }   

4. .body {   

5.   width: 250px;   

6.   height: 250px;   

7.   background: #ffffff;   

8.   border-radius: 50%;   

9.   box-shadow: inset -20px -5px 35px rgba(0, 0, 0, 0.2);   

10.   position: absolute;   

11.   rightright: 0;   

12.   left: 0;   

13.   margin: 300px auto;   

14.   animation: jump 1s infinite;   

15. }   

16. .body:before {   

17.   z-index: 2;   

18.   content: "";   

19.   width: 180px;   

20.   height: 180px;   

21.   background: #ffffff;   

22.   border-radius: 50%;   

23.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   

24.   position: relative;   

25.   display: inline-block;   

26.   top: -120px;   

27.   left: 25px;   

28. }   

29. .body:after {   

30.   content: "";   

31.   width: 140px;   

32.   height: 140px;   

33.   background: #ffffff;   

34.   border-radius: 50%;   

35.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   

36.   position: relative;   

37.   display: inline-block;   

38.   top: -400px;   

39.   left: 20px;   

40. }   

41. .body > .hat {   

42.   width: 200px;   

43.   height: 15px;   

44.   border-radius: 50%;   

45.   background-color: #111111;   

46.   position: absolute;   

47.   z-index: 4;   

48.   top: -200px;   

49.   left: -15px;   

50. }   

51. .body > .hat:before {   

52.   content: "";   

53.   width: 100px;   

54.   height: 65px;   

55.   background-color: #111111;   

56.   display: inline-block;   

57.   position: relative;   

58.   top: -55px;   

59.   left: 51px;   

60. }   

61. .body > .hat:after {   

62.   z-index: 5;   

63.   content: "";   

64.   display: inline-block;   

65.   position: relative;   

66.   top: -145px;   

67.   left: 51px;   

68.   width: 100px;   

69.   height: 5px;   

70.   border-radius: 50%;   

71.   background-color: #2b2b2b;   

72. }   

73. .body > .hat > .ribbon {   

74.   height: 10px;   

75.   width: 100px;   

76.   background-color: #6d2018;   

77.   position: relative;   

78.   top: -90px;   

79.   left: 51px;   

80.   z-index: 6;   

81. }   

82. .body > .face {   

83.   z-index: 3;   

84.   width: 12px;   

85.   height: 12px;   

86.   background-color: #2c3e50;   

87.   border-radius: 50%;   

88.   position: absolute;   

89.   top: -170px;   

90.   left: 38px;   

91. }   

92. .body > .face:before {   

93.   content: "";   

94.   background-color: transparent;   

95.   display: inline-block;   

96.   position: relative;   

97.   top: 30px;   

98.   left: -45px;   

99.   transform: rotate(-15deg);   

100.   border-top: 12px solid transparent;   

101.   border-bottom: 12px solid transparent;   

102.   border-right: 40px solid #e67e22;   

103. }   

104. .body > .face:after {   

105.   content: "";   

106.   background-color: transparent;   

107.   display: inline-block;   

108.   position: relative;   

109.   top: 0;   

110.   left: -46px;   

111.   transform: rotate(-15deg);   

112.   border-top: 12px solid transparent;   

113.   border-right: 40px solid #bf6516;   

114. }   

115. .body > .scarf {   

116.   z-index: 3;   

117.   width: 150px;   

118.   height: 30px;   

119.   background-color: #2980b9;   

120.   position: absolute;   

121.   top: -110px;   

122.   left: 25px;   

123.   transform: rotate(-15deg);   

124.   border-radius: 20%;   

125. }   

126. .body > .scarf:after {   

127.   content: "";   

128.   width: 75px;   

129.   height: 30px;   

130.   background-color: #2980b9;   

131.   display: inline-block;   

132.   position: relative;   

133.   top: 16px;   

134.   left: 80px;   

135.   transform: rotate(85deg);   

136.   border-radius: 20%;   

137. }   

138. .body > .left-arm,   

139. .body .rightright-arm {   

140.   z-index: 7;   

141.   width: 100px;   

142.   height: 6px;   

143.   background-color: #825a2c;   

144.   position: absolute;   

145.   top: 10px;   

146.   left: -20px;   

147.   transform: rotate(-15deg);   

148.   animation: rub-rightright 0.5s infinite;   

149. }   

150. .body > .left-arm > .hand,   

151. .body .rightright-arm > .hand {   

152.   width: 25px;   

153.   height: 6px;   

154.   background-color: #825a2c;   

155.   position: absolute;   

156.   top: -32px;   

157.   left: -60px;   

158.   transform: rotate(75deg);   

159. }   

160. .body > .left-arm:after,   

161. .body .rightright-arm:after {   

162.   content: "";   

163.   width: 75px;   

164.   height: 6px;   

165.   background-color: #a87439;   

166.   display: inline-block;   

167.   position: relative;   

168.   top: -24px;   

169.   left: -70px;   

170.   transform: rotate(25deg);   

171. }   

172. .body > .left-arm.left-arm,   

173. .body .rightright-arm.left-arm {   

174.   background-color: #a87439;   

175.   animation: rub-left 0.5s infinite;   

176.   top: -15px;   

177.   z-index: 1;   

178. }   

179. .body > .left-arm.left-arm > .hand,   

180. .body .rightright-arm.left-arm > .hand {   

181.   background-color: #a87439;   

182.   top: -14px;   

183.   transform: rotate(45deg);   

184. }   

185. .body > .left-arm.left-arm:after,   

186. .body .rightright-arm.left-arm:after {   

187.   background-color: #825a2c;   

188.   transform: rotate(5deg);   

189.   top: -12px;   

190.   left: -74px;   

191. }   

192. .puddle {   

193.   z-index: -1;   

194.   width: 200px;   

195.   height: 100px;   

196.   background: #2980b9;   

197.   border-radius: 50%;   

198.   position: absolute;   

199.   rightright: 0;   

200.   left: -50px;   

201.   margin: 500px auto;   

202. }   

203. .puddle:after {   

204.   content: "";   

205.   width: 120px;   

206.   height: 80px;   

207.   display: inline-block;   

208.   border-radius: 50%;   

209.   left: 150px;   

210.   position: relative;   

211.   background-color: #2980b9;   

212. }   

213. .text {   

214.   text-align: center;   

215.   font-family: 'Lobster', cursive;   

216.   font-size: 74px;   

217.   display: inline-block;   

218.   transform: rotate(-15deg);   

219.   position: absolute;   

220.   margin: 50px 30px;   

221.   color: #ffffff;   

222.   text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);   

223. }   

224. .text > small {   

225.   font-size: 20px;   

226.   display: block;   

227. }   

228. @keyframes rub-left {   

229.   0% {   

230.     margin-left: 0px;   

231.     margin-top: 0;   

232.   }   

233.   50% {   

234.     margin-left: 5px;   

235.     margin-top: 1px;   

236.   }   

237.   100% {   

238.     margin-left: 0px;   

239.     margin-top: 0;   

240.   }   

241. }   

242. @keyframes rub-rightright {   

243.   0% {   

244.     margin-left: 4px;   

245.   }   

246.   50% {   

247.     margin-left: 0px;   

248.   }   

249.   100% {   

250.     margin-left: 4px;   

251.   }   

252. }   

253. @keyframes jump {   

254.   0% {   

255.     margin: 300px auto;   

256.   }   

257.   40% {   

258.     margin: 250px auto;   

259.   }   

260.   80% {   

261.     margin: 300px auto;   

262.   }   

263. }  

到此，關于“怎么用css3制作元旦雪人動畫特效”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！