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

内容摘要
效果就像这样：

不废话，直接上代码！
hrml代码：

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


<!DOCTYPE html>
<html>
<head lang="zh">
<meta charset="UTF-8">
<tit
文章正文

效果就像这样：

不废话，直接上代码！

hrml代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="zh">  
  4.     <meta charset="UTF-8">  
  5.     <title>纯CSS3画出小黄人并实现动画效果</title>  
  6.     <Link href="index.css" type="text/css" rel="stylesheet" />  
  7. </head>  
  8. <body>  
  9.     <!--容器-->  
  10.     <div class="wrapper">  
  11.         <!--小黄人-->  
  12.         <div class="container">  
  13.             <!--头发-->  
  14.             <div class="hairs">  
  15.                 <div class="hairs_one"></div>  
  16.                 <div class="hairs_two"></div>  
  17.             </div>  
  18.             <!--头发-->  
  19.             <!--眼睛-->  
  20.             <div class="eyes">  
  21.                 <div class="eye_left">  
  22.                     <div class="black">  
  23.                         <div class="white"></div>  
  24.                     </div>  
  25.                 </div>  
  26.                 <div class="eye_right">  
  27.                     <div class="black">  
  28.                         <div class="white"></div>  
  29.                     </div>  
  30.                 </div>  
  31.             </div>  
  32.             <!--眼睛-->  
  33.             <!--嘴巴-->  
  34.             <div class="mouth">  
  35.                 <div class="mouth_box"></div>  
  36.             </div>  
  37.             <!--嘴巴-->  
  38.             <!--手-->  
  39.             <div class="hands">  
  40.                 <div class="left_hand"></div>  
  41.                 <div class="right_hand"></div>  
  42.             </div>  
  43.             <!--手-->  
  44.             <!--身体-->  
  45.             <div class="mybody">  
  46.                 <!--裤子-->  
  47.                 <div class="trousers">  
  48.                     <!--裤子突出部分-->  
  49.                     <div class="trousers_top"></div>  
  50.                     <!--裤子口袋-->  
  51.                     <div class="pocket"></div>  
  52.                     <!--三角线-->  
  53.                     <div class="line-left"></div>  
  54.                     <div class="line-right"></div>  
  55.                     <div class="line-bottom"></div>  
  56.                     <!--吊带-->  
  57.                     <div class="condoleBelt">  
  58.                         <div class="left"></div>  
  59.                         <div class="right"></div>  
  60.                     </div>  
  61.                 </div>  
  62.                 <!--裤子-->  
  63.             </div>  
  64.             <!--身体-->  
  65.             <!--脚-->  
  66.             <div class="foot">  
  67.                 <div class="left_foot"></div>  
  68.                 <div class="right_foot"></div>  
  69.             </div>  
  70.             <!--脚-->  
  71.             <!--阴影-->  
  72.             <div class="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: 100px auto;   
  8. }   
  9. .container {   
  10.   position: relative;   
  11. }   
  12. .container .mybody {   
  13.   position: absolute;   
  14.   width: 240px;   
  15.   height: 400px;   
  16.   border: 5px solid #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: 6px solid #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: 0 auto;   
  39.   border: 6px solid #000;   
  40.   border-bottom: none;   
  41. }   
  42. .container .mybody .trousers .pocket {   
  43.   width: 60px;   
  44.   height: 45px;   
  45.   border: 6px solid #000;   
  46.   border-radius: 0 0 25px 25px;   
  47.   left: 0;   
  48.   rightright: 0;   
  49.   margin: 0 auto;   
  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: 6px solid;   
  59.   border-bottom: 6px solid;   
  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: 3px solid #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: 5px solid #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: 8px solid #000;   
  122.   position: absolute;   
  123.   transform: rotate(35deg);   
  124.   left: 24px;   
  125.   top: -17px;   
  126.   border-radius: 50%;   
  127.   animation: hairs 2s ease-in-out infinite;   
  128. }   
  129. .container .hairs .hairs_two {   
  130.   width: 80px;   
  131.   height: 80px;   
  132.   border-top: 6px solid #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: 6px solid #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_black 5s ease-in-out infinite;   
  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_white 5s ease-in-out infinite;   
  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: 5px solid #000;   
  205.   background: #fff;   
  206.   top: 170px;   
  207.   left: 90px;   
  208.   border-bottom-left-radius: 30px;   
  209.   transform: rotate(-35deg);   
  210.   animation: mouth_box 5s ease-in-out infinite;   
  211. }   
  212. .container .mouth .mouth_box:after {   
  213.   background: #f9d946;   
  214.   width: 70px;   
  215.   height: 32px;   
  216.   content: '';   
  217.   position: absolute;   
  218.   border-bottom: 5px solid #000;   
  219.   transform: rotate(35deg);   
  220.   top: -14px;   
  221.   left: 6px;   
  222.   animation: mouth_after 5s ease-in-out infinite;   
  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: 6px solid #000;   
  233.   transform: rotate(40deg);   
  234.   position: absolute;   
  235.   background: #f9d946;   
  236.   border-radius: 30px;   
  237.   top: 220px;   
  238.   animation: left_hand 1s ease-in-out infinite;   
  239. }   
  240. .container .hands .left_hand {   
  241.   left: -24px;   
  242. }   
  243. .container .hands .left_hand:after {   
  244.   width: 6px;   
  245.   border: 3px solid #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: 3px solid #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_foot 1s ease-in-out infinite;   
  286. }   
  287. .container .foot .left_foot:after {   
  288.   rightright: 0;   
  289.   top: 20px;   
  290.   border-radius: 30px 0 10px 20px;   
  291. }   
  292. .container .foot .right_foot {   
  293.   left: 128px;   
  294.   animation: right_foot 1s ease-in-out infinite;   
  295. }   
  296. .container .foot .right_foot:after {   
  297.   left: 0;   
  298.   top: 20px;   
  299.   border-radius: 0 30px 20px 10px;   
  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);   
代码注释
上一篇Nodejs实现的一个简单udp广播服务器、客户端下一篇Win10预览版分辨率无法调节该怎么办？

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！

© 2020 IDC笔记 . | 备案号：辽ICP备18000516号