主页 / 建站知识 /

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

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

效果就像这样

不废话，直接上代码！

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_"></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-: 6px solid #000;   
  28.   background: #2074a0;   
  29. }   
  30. .container .mybody .trousers .trousers_ {   
  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.   : 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.   : -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.   : 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-: 8px solid #000;   
  122.   position: absolute;   
  123.   transform: rotate(35deg);   
  124.   left: 24px;   
  125.   : -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-: 6px solid #000;   
  133.   position: absolute;   
  134.   transform: rotate(15deg);   
  135.   left: 50px;   
  136.   : -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.   : 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.   : 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.   : 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.   : 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.   : 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.   : -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.   : 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.   : 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.   : 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.   : 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.   : 20px;   
  299.   border-radius: 0 30px 20px 10px;   
  300. }   
  301. .container .foot_shadow {   
  302.   position: absolute;   
  303.   : 456px;   
  304.   width: 240px;   
  305.   height: 2px;   
  306.   background: rgba(0, 0, 0, 0.3);   
  307.   box-shadow: 0 0 2px 4px rgba(0, 0, 0, 0.3);   
  308.   border-radius: 50%;   
  309. }   
  310. @keyframes hairs {   
  311.   30% {   
  312.     transform: rotate(32deg) translate3d(-4px, -2px, 0);   
  313.   }   
  314. }   
  315. @keyframes eys_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. @keyframes eys_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. @keyframes mouth_box {   
  351.   40%,   
  352.   43% {   
  353.     width: 45px;   
  354.     height: 25px;   
  355.     : 175px;   
  356.   }   
  357.   0%,   
  358.   35%,   
  359.   48%,   
  360.   100% {   
  361.     width: 55px;   
  362.     height: 35px;   
  363.     : 170px;   
  364.     transform: rotate(-35deg);   
  365.   }   
  366. }   
  367. @keyframes mouth_after {   
  368.   40%,   
  369.   43% {   
  370.     width: 60.5px;   
  371.     : -19.3px;   
  372.     left: 1.5px;   
  373.   }   
  374.   0%,   
  375.   35%,   
  376.   48%,   
  377.   100% {   
  378.     width: 70px;   
  379.     : -16px;   
  380.     left: 3px;   
  381.     transform: rotate(33deg);   
  382.   }   
  383. }   
  384. @keyframes left_hand {   
  385.   0%,   
  386.   50%,   
  387.   100% {   
  388.     transform: rotate(40deg);   
  389.   }   
  390.   30% {   
  391.     transform: rotate(37deg) translateX(1px);   
  392.   }   
  393. }   
  394. @keyframes right_foot {   
  395.   0%,   
  396.   50%,   
  397.   100% {   
  398.     transform: rotate(0deg);   
  399.   }   
  400.   30% {   
  401.     transform: rotate(-8deg);   
  402.   }   
  403. }   
  404. @keyframes left_foot {   
  405.   0%,   
  406.   50%,   
  407.   100% {   
  408.     transform: rotate(0deg);   
  409.   }   
  410.   80% {   
  411.     transform: rotate(8deg);   
  412.   }   
  413. }  

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

原文

上一篇：浅谈各种浏览器下的CSS Hack兼容性写法 下一篇：CSS利用伪元素实现导航栏斜线分隔

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by