温馨提示×

温馨提示×

您好，登录后才能下订单哦！

密码登录×
登录注册×
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
登 录 注册有礼
云服务器 香港服务器 高防服务器
最新更新 网站标签 地图导航
产品

怎么用纯CSS3画出小黄人图案

发布时间：2021-08-10 23:38:59 来源：亿速云 阅读：112 作者：chen 栏目：web开发

本篇内容介绍了“怎么用纯CSS3画出小黄人图案”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

效果就像这样：

怎么用纯CSS3画出小黄人图案

不废话，直接上代码！

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);   

  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.     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. @keyframes mouth_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. @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. }  

“怎么用纯CSS3画出小黄人图案”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

向AI问一下细节
推荐阅读：
  1. 使用纯CSS实现圣诞节雪花图案
  2. CSS3制作小黄人动画效果

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

css3

猜你喜欢

最新资讯
相关推荐

相关标签

html5+css3 css3动画 ​css3 html5 css3 css3新特性 3d all 10个 30个 age background avascript 2d 3代 animation ansi animate ::before @media 404页面
AI
助
手
产品服务
地区划分
专题活动
帮助支持
关于我们
售后咨询
7*24小时在线电话：400-100-2938
7*24小时在线 QQ：800811969
关注亿速云

亿速云公众号

手机网站二维码

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有

广州亿速云计算有限公司粤ICP备17096448号-1 粤公网安备 44010402001142号增值电信业务经营许可证编号：B1-20181529