快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

怎么用css3制作元旦雪人动画特效

这篇文章主要介绍“怎么用css3制作元旦雪人动画特效”，在日常操作中，相信很多人在怎么用css3制作元旦雪人动画特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用css3制作元旦雪人动画特效”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；做网站、成都做网站收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十余年的成都创新互联网站建设公司。

在圣诞节或者是元旦的时候，爱编程小编给大家分享一款纯css3实现的雪人动画特效。该实例实现一个雪人跳动的特效，效果图如下：

怎么用css3制作元旦雪人动画特效

实现的代码。

html代码：

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

  1. lolwut-@rsmswlln  

  2.      

  3.          

  4.              

  5.            

  

  •        

    •   

  •          

  •        

    •   

  •          

  •          

  •          

  •              

  •              

  •          

  •          

  •              

  •              

  •          

  •      

  •      

  •      

    • css代码：

    CSS Code复制内容到剪贴板

    1. body {   

    2.   background: #c0392b;   

    3. }   

    4. .body {   

    5.   width: 250px;   

    6.   height: 250px;   

    7.   background: #ffffff;   

    8.   border-radius: 50%;   

    9.   box-shadow: inset -20px -5px 35px rgba(0, 0, 0, 0.2);   

    10.   position: absolute;   

    11.   rightright: 0;   

    12.   left: 0;   

    13.   margin: 300px auto;   

    14.   animation: jump 1s infinite;   

    15. }   

    16. .body:before {   

    17.   z-index: 2;   

    18.   content: "";   

    19.   width: 180px;   

    20.   height: 180px;   

    21.   background: #ffffff;   

    22.   border-radius: 50%;   

    23.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   

    24.   position: relative;   

    25.   display: inline-block;   

    26.   top: -120px;   

    27.   left: 25px;   

    28. }   

    29. .body:after {   

    30.   content: "";   

    31.   width: 140px;   

    32.   height: 140px;   

    33.   background: #ffffff;   

    34.   border-radius: 50%;   

    35.   box-shadow: inset -10px -5px 10px rgba(0, 0, 0, 0.2);   

    36.   position: relative;   

    37.   display: inline-block;   

    38.   top: -400px;   

    39.   left: 20px;   

    40. }   

    41. .body > .hat {   

    42.   width: 200px;   

    43.   height: 15px;   

    44.   border-radius: 50%;   

    45.   background-color: #111111;   

    46.   position: absolute;   

    47.   z-index: 4;   

    48.   top: -200px;   

    49.   left: -15px;   

    50. }   

    51. .body > .hat:before {   

    52.   content: "";   

    53.   width: 100px;   

    54.   height: 65px;   

    55.   background-color: #111111;   

    56.   display: inline-block;   

    57.   position: relative;   

    58.   top: -55px;   

    59.   left: 51px;   

    60. }   

    61. .body > .hat:after {   

    62.   z-index: 5;   

    63.   content: "";   

    64.   display: inline-block;   

    65.   position: relative;   

    66.   top: -145px;   

    67.   left: 51px;   

    68.   width: 100px;   

    69.   height: 5px;   

    70.   border-radius: 50%;   

    71.   background-color: #2b2b2b;   

    72. }   

    73. .body > .hat > .ribbon {   

    74.   height: 10px;   

    75.   width: 100px;   

    76.   background-color: #6d2018;   

    77.   position: relative;   

    78.   top: -90px;   

    79.   left: 51px;   

    80.   z-index: 6;   

    81. }   

    82. .body > .face {   

    83.   z-index: 3;   

    84.   width: 12px;   

    85.   height: 12px;   

    86.   background-color: #2c3e50;   

    87.   border-radius: 50%;   

    88.   position: absolute;   

    89.   top: -170px;   

    90.   left: 38px;   

    91. }   

    92. .body > .face:before {   

    93.   content: "";   

    94.   background-color: transparent;   

    95.   display: inline-block;   

    96.   position: relative;   

    97.   top: 30px;   

    98.   left: -45px;   

    99.   transform: rotate(-15deg);   

    100.   border-top: 12px solid transparent;   

    101.   border-bottom: 12px solid transparent;   

    102.   border-right: 40px solid #e67e22;   

    103. }   

    104. .body > .face:after {   

    105.   content: "";   

    106.   background-color: transparent;   

    107.   display: inline-block;   

    108.   position: relative;   

    109.   top: 0;   

    110.   left: -46px;   

    111.   transform: rotate(-15deg);   

    112.   border-top: 12px solid transparent;   

    113.   border-right: 40px solid #bf6516;   

    114. }   

    115. .body > .scarf {   

    116.   z-index: 3;   

    117.   width: 150px;   

    118.   height: 30px;   

    119.   background-color: #2980b9;   

    120.   position: absolute;   

    121.   top: -110px;   

    122.   left: 25px;   

    123.   transform: rotate(-15deg);   

    124.   border-radius: 20%;   

    125. }   

    126. .body > .scarf:after {   

    127.   content: "";   

    128.   width: 75px;   

    129.   height: 30px;   

    130.   background-color: #2980b9;   

    131.   display: inline-block;   

    132.   position: relative;   

    133.   top: 16px;   

    134.   left: 80px;   

    135.   transform: rotate(85deg);   

    136.   border-radius: 20%;   

    137. }   

    138. .body > .left-arm,   

    139. .body .rightright-arm {   

    140.   z-index: 7;   

    141.   width: 100px;   

    142.   height: 6px;   

    143.   background-color: #825a2c;   

    144.   position: absolute;   

    145.   top: 10px;   

    146.   left: -20px;   

    147.   transform: rotate(-15deg);   

    148.   animation: rub-rightright 0.5s infinite;   

    149. }   

    150. .body > .left-arm > .hand,   

    151. .body .rightright-arm > .hand {   

    152.   width: 25px;   

    153.   height: 6px;   

    154.   background-color: #825a2c;   

    155.   position: absolute;   

    156.   top: -32px;   

    157.   left: -60px;   

    158.   transform: rotate(75deg);   

    159. }   

    160. .body > .left-arm:after,   

    161. .body .rightright-arm:after {   

    162.   content: "";   

    163.   width: 75px;   

    164.   height: 6px;   

    165.   background-color: #a87439;   

    166.   display: inline-block;   

    167.   position: relative;   

    168.   top: -24px;   

    169.   left: -70px;   

    170.   transform: rotate(25deg);   

    171. }   

    172. .body > .left-arm.left-arm,   

    173. .body .rightright-arm.left-arm {   

    174.   background-color: #a87439;   

    175.   animation: rub-left 0.5s infinite;   

    176.   top: -15px;   

    177.   z-index: 1;   

    178. }   

    179. .body > .left-arm.left-arm > .hand,   

    180. .body .rightright-arm.left-arm > .hand {   

    181.   background-color: #a87439;   

    182.   top: -14px;   

    183.   transform: rotate(45deg);   

    184. }   

    185. .body > .left-arm.left-arm:after,   

    186. .body .rightright-arm.left-arm:after {   

    187.   background-color: #825a2c;   

    188.   transform: rotate(5deg);   

    189.   top: -12px;   

    190.   left: -74px;   

    191. }   

    192. .puddle {   

    193.   z-index: -1;   

    194.   width: 200px;   

    195.   height: 100px;   

    196.   background: #2980b9;   

    197.   border-radius: 50%;   

    198.   position: absolute;   

    199.   rightright: 0;   

    200.   left: -50px;   

    201.   margin: 500px auto;   

    202. }   

    203. .puddle:after {   

    204.   content: "";   

    205.   width: 120px;   

    206.   height: 80px;   

    207.   display: inline-block;   

    208.   border-radius: 50%;   

    209.   left: 150px;   

    210.   position: relative;   

    211.   background-color: #2980b9;   

    212. }   

    213. .text {   

    214.   text-align: center;   

    215.   font-family: 'Lobster', cursive;   

    216.   font-size: 74px;   

    217.   display: inline-block;   

    218.   transform: rotate(-15deg);   

    219.   position: absolute;   

    220.   margin: 50px 30px;   

    221.   color: #ffffff;   

    222.   text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);   

    223. }   

    224. .text > small {   

    225.   font-size: 20px;   

    226.   display: block;   

    227. }   

    228. @keyframes rub-left {   

    229.   0% {   

    230.     margin-left: 0px;   

    231.     margin-top: 0;   

    232.   }   

    233.   50% {   

    234.     margin-left: 5px;   

    235.     margin-top: 1px;   

    236.   }   

    237.   100% {   

    238.     margin-left: 0px;   

    239.     margin-top: 0;   

    240.   }   

    241. }   

    242. @keyframes rub-rightright {   

    243.   0% {   

    244.     margin-left: 4px;   

    245.   }   

    246.   50% {   

    247.     margin-left: 0px;   

    248.   }   

    249.   100% {   

    250.     margin-left: 4px;   

    251.   }   

    252. }   

    253. @keyframes jump {   

    254.   0% {   

    255.     margin: 300px auto;   

    256.   }   

    257.   40% {   

    258.     margin: 250px auto;   

    259.   }   

    260.   80% {   

    261.     margin: 300px auto;   

    262.   }   

    263. }  

    到此，关于“怎么用css3制作元旦雪人动画特效”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


    当前名称：怎么用css3制作元旦雪人动画特效
    转载来源：http://6mz.cn/article/jojges.html

    其他资讯