css实现秋风落叶飘落动画效果代码-html代码-BFW代码库

css实现秋风落叶飘落动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现秋风落叶飘落动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {background: #222;}
        
        /* leaf animations */
        
        #leaves {position:relative;top:-50px;width:100%;text-align: right;}
        
        #leaves i {
            display: inline-block;
            width: 200px;
            height: 150px;
            background: linear-gradient(to bottom right, #309900, #005600);
            transform: skew(20deg);
            border-radius: 5% 40% 70%;
            box-shadow: inset 0px 0px 1px #222;
            border: 1px solid #333;
            z-index: 1;
            -webkit-animation: falling 5s 0s infinite;
        }
        
        #leaves i:nth-of-type(2n) { -webkit-animation: falling2 5s 0s infinite; }
        #leaves i:nth-of-type(3n) { -webkit-animation: falling3 5s 0s infinite; }
        
        #leaves i:before {
          position: absolute;
          content: '';
          top: 117px;
          right: 9px;
          height: 27px;
          width: 32px;
          transform: rotate(49deg);
          border-radius: 0% 15% 15% 0%;
          border-top: 1px solid #222;
          border-bottom: 1px solid #222;
          border-left: 0px solid #222;
          border-right: 1px solid #222;
          background: linear-gradient(to right, rgba(0,100,0,1), #005600);
          z-index: 1;
        }
        
        #leaves i:after {
          content: '';
          height: 125px;
          width: 10px;
          background: linear-gradient(to right, rgba(0,0,0,.15), rgba(0,0,0,0));
          display: block;
          transform: rotate(125deg);
          position: absolute;
          left: 85px;
          border-radius:50%;
        }
        
        
        #leaves i:nth-of-type(n)    { height:23px; width:30px; }
        #leaves i:nth-of-type(n):before { width:7px; height:5px; top:17px; right:1px; }
        #leaves i:nth-of-type(n):after { width:2px; height:17px; left: 12px; top:0px; }
        
        #leaves i:nth-of-type(2n+1)    { height:11px; width:16px; }
        #leaves i:nth-of-type(2n+1):before { width:4px; height:3px; top:7px; right:0px; }
        #leaves i:nth-of-type(2n+1):after { width:2px; height:6px; left: 5px; top:1px; }
        
        #leaves i:nth-of-type(3n+2)  { height:17px; width:23px; }
        #leaves i:nth-of-type(3n+2):before  { height:4px; width:4px; top:12px; right:1px; }
        #leaves i:nth-of-type(3n+2):after  { height:10px; width:2px; top:1px; left:8px; }
        
        #leaves i:nth-of-type(n)   { -webkit-animation-delay: 1.9s;}
        #leaves i:nth-of-type(2n)  { -webkit-animation-delay: 3.9s;}
        #leaves i:nth-of-type(3n)  { -webkit-animation-delay: 2.3s;}
        #leaves i:nth-of-type(4n)  { -webkit-animation-delay: 4.4s;}
        #leaves i:nth-of-type(5n)  { -webkit-animation-delay: 5s;  }
        #leaves i:nth-of-type(6n)  { -webkit-animation-delay: 3.5s;}
        #leaves i:nth-of-typ.........完整代码请登录后点击上方下载按钮下载查看