纯CSS3打造属于自己的“小黄人”

网络
断断续续的烟雨给江南披上了一件白色的纱衣，这件飘若浮云，清净如水的嫁纱，迷蒙了往昔，模糊了过去。我开始在其中憧憬，永远的置身于这种氛围中，让世俗的纠缠远离。

效果就像这样：

不废话，直接上代码！

hrml代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <html>
  3. <headlang="zh">
  4. <metacharset="UTF-8">
  5. <title>纯CSS3画出小黄人并实现动画效果</title>
  6. <Linkrel="nofollow noopener noreferrer" href="index.css"type="text/css"rel="stylesheet"/>
  7. </head>
  8. <body>
  9. <!--容器-->
  10. <divclass="wrapper">
  11. <!--小黄人-->
  12. <divclass="container">
  13. <!--头发-->
  14. <divclass="hairs">
  15. <divclass="hairs_one"></div>
  16. <divclass="hairs_two"></div>
  17. </div>
  18. <!--头发-->
  19. <!--眼睛-->
  20. <divclass="eyes">
  21. <divclass="eye_left">
  22. <divclass="black">
  23. <divclass="white"></div>
  24. </div>
  25. </div>
  26. <divclass="eye_right">
  27. <divclass="black">
  28. <divclass="white"></div>
  29. </div>
  30. </div>
  31. </div>
  32. <!--眼睛-->
  33. <!--嘴巴-->
  34. <divclass="mouth">
  35. <divclass="mouth_box"></div>
  36. </div>
  37. <!--嘴巴-->
  38. <!--手-->
  39. <divclass="hands">
  40. <divclass="left_hand"></div>
  41. <divclass="right_hand"></div>
  42. </div>
  43. <!--手-->
  44. <!--身体-->
  45. <divclass="mybody">
  46. <!--裤子-->
  47. <divclass="trousers">
  48. <!--裤子突出部分-->
  49. <divclass="trousers_top"></div>
  50. <!--裤子口袋-->
  51. <divclass="pocket"></div>
  52. <!--三角线-->
  53. <divclass="line-left"></div>
  54. <divclass="line-right"></div>
  55. <divclass="line-bottom"></div>
  56. <!--吊带-->
  57. <divclass="condoleBelt">
  58. <divclass="left"></div>
  59. <divclass="right"></div>
  60. </div>
  61. </div>
  62. <!--裤子-->
  63. </div>
  64. <!--身体-->
  65. <!--脚-->
  66. <divclass="foot">
  67. <divclass="left_foot"></div>
  68. <divclass="right_foot"></div>
  69. </div>
  70. <!--脚-->
  71. <!--阴影-->
  72. <divclass="foot_shadow"></div>
  73. <!--阴影-->
  74. </div>
  75. </div>
  76. </body>
  77. </html>

css代码：

CSS Code复制内容到剪贴板
  1. body{
  2. margin:0;
  3. padding:0;
  4. }
  5. .wrapper{
  6. width:300px;
  7. margin:100pxauto;
  8. }
  9. .container{
  10. position:relative;
  11. }
  12. .container.mybody{
  13. position:absolute;
  14. width:240px;
  15. height:400px;
  16. border:5pxsolid#000;
  17. border-radius:115px;
  18. background:#f9d946;
  19. overflow:hidden;
  20. z-index:2;
  21. }
  22. .container.mybody.trousers{
  23. position:absolute;
  24. bottombottom:0;
  25. width:100%;
  26. height:100px;
  27. border-top:6pxsolid#000;
  28. background:#2074a0;
  29. }
  30. .container.mybody.trousers.trousers_top{
  31. width:160px;
  32. height:60px;
  33. background:#2074a0;
  34. position:absolute;
  35. bottombottom:100px;
  36. left:0;
  37. rightright:0;
  38. margin:0auto;
  39. border:6pxsolid#000;
  40. border-bottom:none;
  41. }
  42. .container.mybody.trousers.pocket{
  43. width:60px;
  44. height:45px;
  45. border:6pxsolid#000;
  46. border-radius:0025px25px;
  47. left:0;
  48. rightright:0;
  49. margin:0auto;
  50. position:absolute;
  51. bottombottom:65px;
  52. }
  53. .container.mybody.trousers.line-left,
  54. .container.mybody.trousers.line-rightright{
  55. width:30px;
  56. height:30px;
  57. border-bottom-rightright-radius:100px;
  58. border-right:6pxsolid;
  59. border-bottom:6pxsolid;
  60. position:absolute;
  61. top:10px;
  62. }
  63. .container.mybody.trousers.line-rightright{
  64. rightright:0;
  65. -webkit-transform:rotate(75deg);
  66. -moz-transform:rotate(75deg);
  67. -o-transform:rotate(75deg);
  68. transform:rotate(75deg);
  69. -ms-transform:rotate(75deg);
  70. }
  71. .container.mybody.trousers.line-bottombottom{
  72. height:40px;
  73. border:3pxsolid#000;
  74. left:118px;
  75. position:absolute;
  76. bottombottom:0;
  77. border-radius:3px;
  78. }
  79. .container.mybody.trousers.condoleBelt{
  80. position:absolute;
  81. }
  82. .container.mybody.trousers.condoleBelt.left,
  83. .container.mybody.trousers.condoleBelt.rightright{
  84. width:100px;
  85. height:16px;
  86. border:5pxsolid#000;
  87. background:#2074a0;
  88. top:-90px;
  89. position:absolute;
  90. }
  91. .container.mybody.trousers.condoleBelt.left:after,
  92. .container.mybody.trousers.condoleBelt.rightright:after{
  93. content:'';
  94. background:#000;
  95. width:8px;
  96. height:8px;
  97. border-radius:50%;
  98. position:absolute;
  99. top:3px;
  100. }
  101. .container.mybody.trousers.condoleBelt.left{
  102. left:-35px;
  103. transform:rotate(45deg);
  104. }
  105. .container.mybody.trousers.condoleBelt.left:after{
  106. rightright:3px;
  107. }
  108. .container.mybody.trousers.condoleBelt.rightright{
  109. transform:rotate(-45deg);
  110. left:165px;
  111. }
  112. .container.mybody.trousers.condoleBelt.rightright:after{
  113. left:3px;
  114. }
  115. .container.hairs{
  116. position:relative;
  117. }
  118. .container.hairs.hairs_one{
  119. width:130px;
  120. height:100px;
  121. border-top:8pxsolid#000;
  122. position:absolute;
  123. transform:rotate(35deg);
  124. left:24px;
  125. top:-17px;
  126. border-radius:50%;
  127. animation:hairs2sease-in-outinfinite;
  128. }
  129. .container.hairs.hairs_two{
  130. width:80px;
  131. height:80px;
  132. border-top:6pxsolid#000;
  133. position:absolute;
  134. transform:rotate(15deg);
  135. left:50px;
  136. top:-10px;
  137. border-radius:50%;
  138. }
  139. .container.eyes{
  140. position:relative;
  141. z-index:3;
  142. }
  143. .container.eyes.eye_left,
  144. .container.eyes.eye_right{
  145. width:85px;
  146. height:85px;
  147. border:6pxsolid#000;
  148. border-radius:50%;
  149. background:#fff;
  150. position:absolute;
  151. top:60px;
  152. }
  153. .container.eyes.eye_left:after,
  154. .container.eyes.eye_right:after{
  155. content:'';
  156. width:28px;
  157. height:18px;
  158. background:#000;
  159. position:absolute;
  160. top:40%;
  161. }
  162. .container.eyes.eye_left{
  163. left:27px;
  164. }
  165. .container.eyes.eye_left:after{
  166. left:-30px;
  167. transform:rotate(7deg)skewX(20deg);
  168. }
  169. .container.eyes.eye_right{
  170. left:124px;
  171. }
  172. .container.eyes.eye_right:after{
  173. rightright:-32px;
  174. transform:rotate(-7deg)skewX(-20deg);
  175. }
  176. .container.eyes.black{
  177. width:40px;
  178. height:40px;
  179. background:#000;
  180. border-radius:50%;
  181. position:absolute;
  182. top:24px;
  183. left:22px;
  184. animation:eys_black5sease-in-outinfinite;
  185. }
  186. .container.eyes.white{
  187. width:20px;
  188. height:20px;
  189. background:#fff;
  190. border-radius:50%;
  191. position:absolute;
  192. top:10px;
  193. left:10px;
  194. animation:eys_white5sease-in-outinfinite;
  195. }
  196. .container.mouth{
  197. position:relative;
  198. z-index:3;
  199. }
  200. .container.mouth.mouth_box{
  201. position:absolute;
  202. width:55px;
  203. height:35px;
  204. border:5pxsolid#000;
  205. background:#fff;
  206. top:170px;
  207. left:90px;
  208. border-bottom-left-radius:30px;
  209. transform:rotate(-35deg);
  210. animation:mouth_box5sease-in-outinfinite;
  211. }
  212. .container.mouth.mouth_box:after{
  213. background:#f9d946;
  214. width:70px;
  215. height:32px;
  216. content:'';
  217. position:absolute;
  218. border-bottom:5pxsolid#000;
  219. transform:rotate(35deg);
  220. top:-14px;
  221. left:6px;
  222. animation:mouth_after5sease-in-outinfinite;
  223. }
  224. .container.hands{
  225. position:relative;
  226. z-index:1;
  227. }
  228. .container.hands.left_hand,
  229. .container.hands.right_hand{
  230. width:80px;
  231. height:80px;
  232. border:6pxsolid#000;
  233. transform:rotate(40deg);
  234. position:absolute;
  235. background:#f9d946;
  236. border-radius:30px;
  237. top:220px;
  238. animation:left_hand1sease-in-outinfinite;
  239. }
  240. .container.hands.left_hand{
  241. left:-24px;
  242. }
  243. .container.hands.left_hand:after{
  244. width:6px;
  245. border:3pxsolid#000;
  246. position:absolute;
  247. content:'';
  248. transform:rotate(90deg);
  249. bottombottom:26px;
  250. left:12px;
  251. }
  252. .container.hands.right_hand{
  253. rightright:26px;
  254. }
  255. .container.hands.right_hand:after{
  256. width:6px;
  257. border:3pxsolid#000;
  258. position:absolute;
  259. content:'';
  260. top:20px;
  261. rightright:18px;
  262. }
  263. .container.foot{
  264. position:relative;
  265. }
  266. .container.foot.left_foot,
  267. .container.foot.right_foot{
  268. width:36px;
  269. height:50px;
  270. background:#000;
  271. position:absolute;
  272. top:400px;
  273. }
  274. .container.foot.left_foot:after,
  275. .container.foot.right_foot:after{
  276. width:60px;
  277. height:35px;
  278. position:absolute;
  279. bottombottom:0;
  280. content:'';
  281. background:#000;
  282. }
  283. .container.foot.left_foot{
  284. left:86px;
  285. animation:left_foot1sease-in-outinfinite;
  286. }
  287. .container.foot.left_foot:after{
  288. rightright:0;
  289. top:20px;
  290. border-radius:30px010px20px;
  291. }
  292. .container.foot.right_foot{
  293. left:128px;
  294. animation:right_foot1sease-in-outinfinite;
  295. }
  296. .container.foot.right_foot:after{
  297. left:0;
  298. top:20px;
  299. border-radius:030px20px10px;
  300. }
  301. .container.foot_shadow{
  302. position:absolute;
  303. top:456px;
  304. width:240px;
  305. height:2px;
  306. background:rgba(0,0,0,0.3);
  307. box-shadow:002px4pxrgba(0,0,0,0.3);
  308. border-radius:50%;
  309. }
  310. @keyframeshairs{
  311. 30%{
  312. transform:rotate(32deg)translate3d(-4px,-2px,0);
  313. }
  314. }
  315. @keyframeseys_black{
  316. 0%{
  317. transform:translateX(0px);
  318. }
  319. 20%,
  320. 40%{
  321. transform:translateX(15px);
  322. }
  323. 60%,
  324. 100%{
  325. transform:translateX(0px);
  326. }
  327. 80%,
  328. 90%{
  329. transform:translateX(-15px);
  330. }
  331. }
  332. @keyframeseys_white{
  333. 0%{
  334. transform:translateX(0px);
  335. }
  336. 20%,
  337. 40%{
  338. transform:translate3d(3px,4px,0px);
  339. }
  340. 60%{
  341. transform:translate(5px,5px);
  342. }
  343. 80%{
  344. transform:translateX(0px);
  345. }
  346. 100%{
  347. transform:translateX(0px);
  348. }
  349. }
  350. @keyframesmouth_box{
  351. 40%,
  352. 43%{
  353. width:45px;
  354. height:25px;
  355. top:175px;
  356. }
  357. 0%,
  358. 35%,
  359. 48%,
  360. 100%{
  361. width:55px;
  362. height:35px;
  363. top:170px;
  364. transform:rotate(-35deg);
  365. }
  366. }
  367. @keyframesmouth_after{
  368. 40%,
  369. 43%{
  370. width:60.5px;
  371. top:-19.3px;
  372. left:1.5px;
  373. }
  374. 0%,
  375. 35%,
  376. 48%,
  377. 100%{
  378. width:70px;
  379. top:-16px;
  380. left:3px;
  381. transform:rotate(33deg);
  382. }
  383. }
  384. @keyframesleft_hand{
  385. 0%,
  386. 50%,
  387. 100%{
  388. transform:rotate(40deg);
  389. }
  390. 30%{
  391. transform:rotate(37deg)translateX(1px);
  392. }
  393. }
  394. @keyframesright_foot{
  395. 0%,
  396. 50%,
  397. 100%{
  398. transform:rotate(0deg);
  399. }
  400. 30%{
  401. transform:rotate(-8deg);
  402. }
  403. }
  404. @keyframesleft_foot{
  405. 0%,
  406. 50%,
  407. 100%{
  408. transform:rotate(0deg);
  409. }
  410. 80%{
  411. transform:rotate(8deg);
  412. }
  413. }

搞定了，没有做浏览器兼容，建议在chrome下浏览，以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/zhangans/p/4883705.html

您可能有感兴趣的文章
创建一个自己的bootstrap模板示例
WEB标准之CSS 打造自己的reset.css
CSS3如何实现可爱的小黄人动画