css代码：

CSS Code复制内容到剪贴板

1. body{   

2.             margin: 0;   

3.             padding: 0;   

4.             width: 100%;   

5.             height: 100%;   

6.         }   

7.         .title p{   

8.             text-align: center;   

9.             font-size: 100px;   

10.             font-weight: bolder;   

11.             color:#333;   

12.         }   

13.         .wrapper{   

14.             margin: 400px auto;   

15.         }   

16.         .littleH{   

17.             position: relative;   

18.             -webkit-perspective: 800;   

19.             -webkit-perspective-origin: 50% 50%;   

20.         }   

21.         .light{   

22.             -webkit-transform-style: preserve-3d;   

23.         }   

24.         .light .light_left,.light .light_right{   

25.             position: absolute;   

26.             width: 100%;   

27.             height: 300px;   

28.             background: lightblue;   

29.             -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);   

30.             -webkit-animation: changeBgColor 2s linear infinite;   

31.         }   

32.         .light .light_right{   

33.             -webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);   

34.             -webkit-animation-delay: 1s;   

35.         }   

36.         @-webkit-keyframes changeBgColor{   

37.             0%,100%{   

38.                 background: lightblue;   

39.             }   

40.             50%{   

41.                 background: lightgreen;   

42.             }   

43.         }   

44.         .light .light_left p,.light .light_right p{   

45.             color:#fff;   

46.             font-size: 80px;   

47.             font-weight: bold;   

48.             margin-left: 100px;   

49.         }   

50.         .light .light_right p{   

51.             float: rightright;   

52.             margin-right: 100px;   

53.         }   

54.         .light .load{   

55.             position: absolute;   

56.             width: 500px;   

57.             height: 1500px;   

58.             background: -webkit-gradient(linear, left top, left bottombottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));   

59.             background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);   

60.             background: linear-gradient(to bottombottom, #aadbdc 51%,#ffffff 52%);    

61.             background-size: 350px 80px;   

62.             -webkit-animation: move_load 5s linear infinite;   

63.         }   

64.         @-webkit-keyframes move_load{   

65.             0%{   

66.                 -webkit-transform:rotateX(90deg) translate3d(250px,0,0);   

67.             }   

68.             100%{   

69.                 -webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);   

70.             }   

71.         }   

72.         .littleH_body{   

73.             position: absolute;   

74.             left:50%;   

75.             margin-left: -157px;   

76.             width: 314px;   

77.             height: 425px;   

78.             background: url(1.png);   

79.             -webkit-transform-style: preserve-3d;   

80.         }   

81.         .leftHair{   

82.             position: absolute;   

83.             rightright: 58px;   

84.             top:-5px;   

85.             width: 100px;   

86.             height: 17px;   

87.             background: url(lefthair.png);   

88.             -webkit-transform-origin: left bottombottom;   

89.             -webkit-animation: lefthair 1s .3s ease-in-out infinite;   

90.   

91.         }   

92.         @-webkit-keyframes lefthair{   

93.             0%,10%,40%,100%{   

94.                 -webkit-transform: rotate(0deg) translateY(1px);   

95.             }   

96.             30%{   

97.                 -webkit-transform: rotate(-3deg) translateY(1px);   

98.             }   

99.         }   

100.         .rightHair{   

101.             position: absolute;   

102.             left: 58px;   

103.             top:-8px;   

104.             width: 100px;   

105.             height: 16px;   

106.             background: url(righthair.png);   

107.             -webkit-transform-origin: rightright bottombottom;   

108.             -webkit-animation: righthair 1s ease-in-out infinite;   

109.         }   

110.         @-webkit-keyframes righthair{   

111.             0%,10%,40%,100%{   

112.                 -webkit-transform: rotate(0deg) translateY(1px);   

113.             }   

114.             30%{   

115.                 -webkit-transform: rotate(4deg) translateY(1px);   

116.             }   

117.         }   

118.         .leftBlackeye{   

119.             position: absolute;   

120.             rightright: 87px;   

121.             top:102px;   

122.             width: 43px;   

123.             height: 43px;   

124.             background: url(eyeblack.png);   

125.             -webkit-animation: leftblackeye 5s ease-in infinite;   

126.         }   

127.         @-webkit-keyframes leftblackeye{   

128.             0%,20%,50%,70%,100%{   

129.                 -webkit-transform: translateX(0px);   

130.             }   

131.             30%,40%{   

132.                 -webkit-transform: translateX(15px);   

133.             }   

134.             80%,90%{   

135.                 -webkit-transform: translateX(-15px);   

136.             }   

137.         }   

138.         .leftWhiteeye{   

139.             position: absolute;   

140.             rightright: 92px;   

141.             top:110px;   

142.             width: 20px;   

143.             height: 21px;   

144.             background: url(whiteeye.png);   

145.             background-size: 95% 95%;   

146.             background-repeat: no-repeat;   

147.             -webkit-animation: leftwhiteeye 5s ease-in infinite;   

148.         }   

149.         @-webkit-keyframes leftwhiteeye{   

150.             0%,20%,50%,70%,100%{   

151.                 -webkit-transform: translateX(0px);   

152.             }   

153.             30%,40%{   

154.                 -webkit-transform: translate3d(15px,3px,0);   

155.             }   

156.             80%,90%{   

157.                 -webkit-transform: translate3d(-30px,3px,0);   

158.             }   

159.         }   

160.         .rightBlackeye{   

161.             position: absolute;   

162.             left: 84px;   

163.             top:102px;   

164.             width: 43px;   

165.             height: 43px;   

166.             background: url(eyeblack.png);   

167.             -webkit-animation: rightblackeye 5s ease-in infinite;   

168.         }   

169.         @-webkit-keyframes rightblackeye{   

170.             0%,20%,50%,70%,100%{   

171.                 -webkit-transform: translateX(0px);   

172.             }   

173.             30%,40%{   

174.                 -webkit-transform: translateX(15px);   

175.             }   

176.             80%,90%{   

177.                 -webkit-transform: translateX(-15px);   

178.             }   

179.         }   

180.         .rightWhiteeye{   

181.             position: absolute;   

182.             left: 102px;   

183.             top:112px;   

184.             width: 20px;   

185.             height: 21px;   

186.             background: url(whiteeye.png);   

187.             background-size: 95% 95%;   

188.             background-repeat: no-repeat;   

189.             -webkit-animation: rightwhiteeye 5s ease-in infinite;   

190.         }   

191.         @-webkit-keyframes rightwhiteeye{   

192.             0%,20%,50%,70%,100%{   

193.                 -webkit-transform: translateX(0px);   

194.             }   

195.             30%,40%{   

196.                 -webkit-transform: translate3d(15px,3px,0);   

197.             }   

198.             80%,90%{   

199.                 -webkit-transform: translate3d(-30px,3px,0);   

200.             }   

201.         }   

202.         .mouse{   

203.             position: absolute;   

204.             left: 126px;   

205.             top:210px;   

206.             width: 71px;   

207.             height: 30px;   

208.             background: url(mouse.png);   

209.             -webkit-transform-origin: center top;   

210.             -webkit-animation: mouse 5s ease-in-out infinite;   

211.         }   

212.         @-webkit-keyframes mouse{   

213.             40%{   

214.                 -webkit-transform: rotate(-15deg) translateX(22px);   

215.             }   

216.             0%,20%,60%,100%{   

217.                 -webkit-transform: rotate(0deg);   

218.             }   

219.         }   

220.         .leftFoot{   

221.             position: absolute;   

222.             rightright: 85px;   

223.             top:424px;   

224.             width: 68px;   

225.             height: 43px;   

226.             background: url(leftfoot.png);   

227.             -webkit-transform-origin: left top;   

228.             -webkit-animation: leftfoot .6s ease-in-out infinite;   

229.         }   

230.         @-webkit-keyframes leftfoot{   

231.             0%,50%,100%{   

232.                 -webkit-transform: rotate(0deg);   

233.             }   

234.             80%{   

235.                 -webkit-transform: rotate(-10deg);   

236.             }   

237.         }   

238.         .rightFoot{   

239.             position: absolute;   

240.             left: 85px;   

241.             top:424px;   

242.             width: 68px;   

243.             height: 43px;   

244.             background: url(rightfoot.png);   

245.             margin-bottom: 100px;   

246.             -webkit-transform-origin: rightright top;   

247.             -webkit-animation: rightfoot .6s ease-in-out infinite;   

248.         }   

249.         @-webkit-keyframes rightfoot{   

250.             0%,50%,100%{   

251.                 -webkit-transform: rotate(0deg);   

252.             }   

253.   

254.             30%{   

255.                 -webkit-transform: rotate(10deg);   

256.             }   

257.         }   

代码应该还是很简单就能看懂的，不足之处在于图片没有合并，就凑合吧，主要目的还是对CSS3动画（特别是3d）知识点的学习及实践。多练习，才能记得更牢，用得更顺，这只是开始……

PS：附上我抠的图片

1.png

righthair.png

lefthair.png

eyeblack.png

whiteeye.png

mouse.png

rightfoot.png

leftfoot.png

到此，关于“CSS3怎么实现可爱的小黄人动画 ”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流