资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

怎么用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://cdkjz.cn/article/jojges.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    成都网站推广LED显示屏厂家营山产后修复成都服装定制成都app软件开发公司鳄鱼养殖云主机软文营销成都柴油发电机租赁绵竹网站建设

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图