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

2021-01-20 06:36 jianzhan

实际效果就像这样:

不空话,立即上编码!

hrml编码:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="zh">  
  4.     <meta charset="UTF⑻">  
  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.                     <!--3角线-->  
  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.   width300px;   
  7.   margin100px auto;   
  8. }   
  9. .container {   
  10.   positionrelative;   
  11. }   
  12. .container .mybody {   
  13.   positionabsolute;   
  14.   width240px;   
  15.   height400px;   
  16.   border5px solid #000;   
  17.   border-radius: 115px;   
  18.   background#f9d946;   
  19.   overflowhidden;   
  20.   z-index: 2;   
  21. }   
  22. .container .mybody .trousers {   
  23.   positionabsolute;   
  24.   bottombottom: 0;   
  25.   width: 100%;   
  26.   height100px;   
  27.   border-top6px solid #000;   
  28.   background#2074a0;   
  29. }   
  30. .container .mybody .trousers .trousers_top {   
  31.   width160px;   
  32.   height60px;   
  33.   background#2074a0;   
  34.   positionabsolute;   
  35.   bottombottom100px;   
  36.   left: 0;   
  37.   rightright: 0;   
  38.   margin: 0 auto;   
  39.   border6px solid #000;   
  40.   border-bottomnone;   
  41. }   
  42. .container .mybody .trousers .pocket {   
  43.   width60px;   
  44.   height45px;   
  45.   border6px solid #000;   
  46.   border-radius: 0 0 25px 25px;   
  47.   left: 0;   
  48.   rightright: 0;   
  49.   margin: 0 auto;   
  50.   positionabsolute;   
  51.   bottombottom65px;   
  52. }   
  53. .container .mybody .trousers .line-left,   
  54. .container .mybody .trousers .line-rightright {   
  55.   width30px;   
  56.   height30px;   
  57.   border-bottom-rightright-radius: 100px;   
  58.   border-right6px solid;   
  59.   border-bottom6px solid;   
  60.   positionabsolute;   
  61.   top10px;   
  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.   height40px;   
  73.   border3px solid #000;   
  74.   left118px;   
  75.   positionabsolute;   
  76.   bottombottom: 0;   
  77.   border-radius: 3px;   
  78. }   
  79. .container .mybody .trousers .condoleBelt {   
  80.   positionabsolute;   
  81. }   
  82. .container .mybody .trousers .condoleBelt .left,   
  83. .container .mybody .trousers .condoleBelt .rightright {   
  84.   width100px;   
  85.   height16px;   
  86.   border5px solid #000;   
  87.   background#2074a0;   
  88.   top: -90px;   
  89.   positionabsolute;   
  90. }   
  91. .container .mybody .trousers .condoleBelt .left:after,   
  92. .container .mybody .trousers .condoleBelt .rightright:after {   
  93.   content'';   
  94.   background#000;   
  95.   width8px;   
  96.   height8px;   
  97.   border-radius: 50%;   
  98.   positionabsolute;   
  99.   top3px;   
  100. }   
  101. .container .mybody .trousers .condoleBelt .left {   
  102.   left: -35px;   
  103.   transform: rotate(45deg);   
  104. }   
  105. .container .mybody .trousers .condoleBelt .left:after {   
  106.   rightright3px;   
  107. }   
  108. .container .mybody .trousers .condoleBelt .rightright {   
  109.   transform: rotate(⑷5deg);   
  110.   left165px;   
  111. }   
  112. .container .mybody .trousers .condoleBelt .rightright:after {   
  113.   left3px;   
  114. }   
  115. .container .hairs {   
  116.   positionrelative;   
  117. }   
  118. .container .hairs .hairs_one {   
  119.   width130px;   
  120.   height100px;   
  121.   border-top8px solid #000;   
  122.   positionabsolute;   
  123.   transform: rotate(35deg);   
  124.   left24px;   
  125.   top: -17px;   
  126.   border-radius: 50%;   
  127.   animation: hairs 2s ease-in-out infinite;   
  128. }   
  129. .container .hairs .hairs_two {   
  130.   width80px;   
  131.   height80px;   
  132.   border-top6px solid #000;   
  133.   positionabsolute;   
  134.   transform: rotate(15deg);   
  135.   left50px;   
  136.   top: -10px;   
  137.   border-radius: 50%;   
  138. }   
  139. .container .eyes {   
  140.   positionrelative;   
  141.   z-index: 3;   
  142. }   
  143. .container .eyes .eye_left,   
  144. .container .eyes .eye_right {   
  145.   width85px;   
  146.   height85px;   
  147.   border6px solid #000;   
  148.   border-radius: 50%;   
  149.   background#fff;   
  150.   positionabsolute;   
  151.   top60px;   
  152. }   
  153. .container .eyes .eye_left:after,   
  154. .container .eyes .eye_right:after {   
  155.   content'';   
  156.   width28px;   
  157.   height18px;   
  158.   background#000;   
  159.   positionabsolute;   
  160.   top: 40%;   
  161. }   
  162. .container .eyes .eye_left {   
  163.   left27px;   
  164. }   
  165. .container .eyes .eye_left:after {   
  166.   left: -30px;   
  167.   transform: rotate(7deg) skewX(20deg);   
  168. }   
  169. .container .eyes .eye_right {   
  170.   left124px;   
  171. }   
  172. .container .eyes .eye_right:after {   
  173.   rightright: -32px;   
  174.   transform: rotate(⑺deg) skewX(⑵0deg);   
  175. }   
  176. .container .eyes .black {   
  177.   width40px;   
  178.   height40px;   
  179.   background#000;   
  180.   border-radius: 50%;   
  181.   positionabsolute;   
  182.   top24px;   
  183.   left22px;   
  184.   animation: eys_black 5s ease-in-out infinite;   
  185. }   
  186. .container .eyes .white {   
  187.   width20px;   
  188.   height20px;   
  189.   background#fff;   
  190.   border-radius: 50%;   
  191.   positionabsolute;   
  192.   top10px;   
  193.   left10px;   
  194.   animation: eys_white 5s ease-in-out infinite;   
  195. }   
  196. .container .mouth {   
  197.   positionrelative;   
  198.   z-index: 3;   
  199. }   
  200. .container .mouth .mouth_box {   
  201.   positionabsolute;   
  202.   width55px;   
  203.   height35px;   
  204.   border5px solid #000;   
  205.   background#fff;   
  206.   top170px;   
  207.   left90px;   
  208.   border-bottom-left-radius: 30px;   
  209.   transform: rotate(⑶5deg);   
  210.   animation: mouth_box 5s ease-in-out infinite;   
  211. }   
  212. .container .mouth .mouth_box:after {   
  213.   background#f9d946;   
  214.   width70px;   
  215.   height32px;   
  216.   content'';   
  217.   positionabsolute;   
  218.   border-bottom5px solid #000;   
  219.   transform: rotate(35deg);   
  220.   top: -14px;   
  221.   left6px;   
  222.   animation: mouth_after 5s ease-in-out infinite;   
  223. }   
  224. .container .hands {   
  225.   positionrelative;   
  226.   z-index: 1;   
  227. }   
  228. .container .hands .left_hand,   
  229. .container .hands .right_hand {   
  230.   width80px;   
  231.   height80px;   
  232.   border6px solid #000;   
  233.   transform: rotate(40deg);   
  234.   positionabsolute;   
  235.   background#f9d946;   
  236.   border-radius: 30px;   
  237.   top220px;   
  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.   width6px;   
  245.   border3px solid #000;   
  246.   positionabsolute;   
  247.   content'';   
  248.   transform: rotate(90deg);   
  249.   bottombottom26px;   
  250.   left12px;   
  251. }   
  252. .container .hands .right_hand {   
  253.   rightright26px;   
  254. }   
  255. .container .hands .right_hand:after {   
  256.   width6px;   
  257.   border3px solid #000;   
  258.   positionabsolute;   
  259.   content'';   
  260.   top20px;   
  261.   rightright18px;   
  262. }   
  263. .container .foot {   
  264.   positionrelative;   
  265. }   
  266. .container .foot .left_foot,   
  267. .container .foot .right_foot {   
  268.   width36px;   
  269.   height50px;   
  270.   background#000;   
  271.   positionabsolute;   
  272.   top400px;   
  273. }   
  274. .container .foot .left_foot:after,   
  275. .container .foot .right_foot:after {   
  276.   width60px;   
  277.   height35px;   
  278.   positionabsolute;   
  279.   bottombottom: 0;   
  280.   content'';   
  281.   background#000;   
  282. }   
  283. .container .foot .left_foot {   
  284.   left86px;   
  285.   animation: left_foot 1s ease-in-out infinite;   
  286. }   
  287. .container .foot .left_foot:after {   
  288.   rightright: 0;   
  289.   top20px;   
  290.   border-radius: 30px 0 10px 20px;   
  291. }   
  292. .container .foot .right_foot {   
  293.   left128px;   
  294.   animation: right_foot 1s ease-in-out infinite;   
  295. }   
  296. .container .foot .right_foot:after {   
  297.   left: 0;   
  298.   top20px;   
  299.   border-radius: 0 30px 20px 10px;   
  300. }   
  301. .container .foot_shadow {   
  302.   positionabsolute;   
  303.   top456px;   
  304.   width240px;   
  305.   height2px;   
  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(3px4px0px);   
  339.   }   
  340.   60% {   
  341.     transform: translate(5px5px);   
  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.     width45px;   
  354.     height25px;   
  355.     top175px;   
  356.   }   
  357.   0%,   
  358.   35%,   
  359.   48%,   
  360.   100% {   
  361.     width55px;   
  362.     height35px;   
  363.     top170px;   
  364.     transform: rotate(⑶5deg);   
  365.   }   
  366. }   
  367. @keyframes mouth_after {   
  368.   40%,   
  369.   43% {   
  370.     width: 60.5px;   
  371.     top: ⑴9.3px;   
  372.     left: 1.5px;   
  373.   }   
  374.   0%,   
  375.   35%,   
  376.   48%,   
  377.   100% {   
  378.     width70px;   
  379.     top: -16px;   
  380.     left3px;   
  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(⑻deg);   
  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下访问,以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

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