您现在的位置是：网站首页> 编程资料编程资料

一款纯css3制作的2015年元旦雪人动画特效教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-05 1041人已围观

简介 在元旦的时候我们可以在现实中堆雪人也可以用css3堆雪人，今天和大家分享一款纯css3实现的雪人动画特效。该实例实现一个雪人跳动的特效，下面有详细的代码，感兴趣的可以来学习一下

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <span class="text">lolwut<small>-@rsmswllnsmall>span>  
  2.    <div class="body">  
  3.        <div class="hat">  
  4.            <div class="ribbon">  
  5.            div>  
  6.        div>  
  7.        <div class="face">  
  8.        div>  
  9.        <div class="scarf">  
  10.        div>  
  11.        <div class="right-arm">  
  12.            <div class="hand">  
  13.            div>  
  14.        div>  
  15.        <div class="left-arm">  
  16.            <div class="hand">  
  17.            div>  
  18.        div>  
  19.    div>  
  20.    <div class="puddle">  
  21.    div>  

　　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.   提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：一款利用css3的鼠标经过动画显示详情特效的实例教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

    下一篇：一款纯css3实现的鼠标悬停动画按钮纯CSS3实现的鼠标悬停图标旋转导航动画特效源码纯css3实现的鼠标悬停背景翻转动画导航特效源码一款纯CSS3实现的鼠标悬停动画按钮集合特效源码 HTML5+CSS3实现的鼠标悬停动画菜单按钮特效源码 纯css3实现的鼠标悬停动画按钮一款基于CSS3实现的鼠标悬停图片动画及多种文字动画效果源码31款纯css3实现的鼠标悬停动画效果源码纯CSS3实现的鼠标悬停图片文字动画效果源码CSS3鼠标悬停动画显示文字特效源码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网