阿坝州网站建设公司

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

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

创新互联网络公司拥有10多年的成都网站开发建设经验，上1000家客户的共同信赖。提供成都网站设计、网站建设、网站开发、网站定制、卖链接、建网站、网站搭建、响应式网站开发、网页设计师打造企业风格，提供周到的售前咨询和贴心的售后服务

效果就像这样：

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

不废话，直接上代码！

hrml代码：

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

  1.   

  2.   

  3.   

  4.       

  5.     纯CSS3画出小黄人并实现动画效果  

  6.       

  7.   

  8.   

  9.       

  10.       

  11.           

  12.           

  13.               

  14.               

  15.                 

  

  •                 

    •   

  •             

    •   

  •               

  •               

  •               

  •                   

  •                       

  •                         

    •   

  •                       

  •                   

  •                   

  •                       

  •                           

  •                       

  •                   

  •               

  •               

  •               

  •               

  •                   

  •               

  •               

  •               

  •               

  •                   

  •                   

  •               

  •               

  •               

  •               

  •                   

  •                   

  •                       

  •                       

  •                       

  •                       

  •                       

  •                       

  •                       

  •                       

  •                       

  •                       

  •                           

  •                           

  •                       

  •                   

  •                   

  •               

  •               

  •               

  •               

  •                   

  •                   

  •               

  •               

  •               

  •               

  •               

  •           

  •       

  •   

  •     

    • 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画出小黄人图案”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    本文名称：怎么用纯CSS3画出小黄人图案
    文章URL：http://azwzsj.com/article/gpjggh.html

    其他资讯