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

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

2023-10-24 291人已围观

简介 在元旦的时候我们可以在现实中堆雪人也可以用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. }   

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网