逼真的HTML5树叶飘落动画

2020-04-21 07:49:22易采站长站整理

    font-size: 220%;   
    font-family: ‘Georgia’;   
    text-align: center;   
    padding: 20px 10px;   
    -webkit-box-sizing: border-box;   
    -webkit-background-size: 100% 100%;   
    z-index: 1;   
}   
  
p {   
  margin: 15px;   
}   
  
a   
{   
  color: #5C090A;   
  text-decoration: none;   
}   
  
/* Sets the color of the "Dino’s Gardening Service" message */  
em    
{   
    font-weight: bold;   
    font-style: normal;   
}   
  
.phone {   
  font-size: 150%;   
  vertical-align: middle;   
}   
  
/* This CSS rule is applied to all div elements in the leafContainer div.  
   It styles and animates each leafDiv.  
*/  
#leafContainer > div    
{   
    position: absolute;   
    width: 100px;   
    height: 100px;   
  
    /* We use the following properties to apply the fade and drop animations to each leaf.  
       Each of these properties takes two values. These values respectively match a setting  
       for fade and drop.  
    */  
    -webkit-animation-iteration-count: infinite, infinite;   
    -webkit-animation-direction: normal, normal;   
    -webkit-animation-timing-function: linear, ease-in;   
}   
  
/* This CSS rule is applied to all img elements directly inside div elements which are  
   directly inside the leafContainer div. In other words, it matches the ‘img’ elements