CSS：一枚月亮波纹


<html lang="en">
<head> 


   <meta charset="UTF-8">
    <title>
</title>  
  <style>      


  body {        
    background-color: black;       
     margin: 200px;  
      }     
   #iOne{           
 animation: animateTwo 5s infinite ease;  
      }     
   #iTwo{       
     animation: animateTwo 5s infinite ease;    
    }   
     @keyframes animateOne {   
         from{         
       background-color: #fff;        
    }         
   to{         
       background-color: transparent;     
           transform:scale(4.0)      
      }       
 }     
   @keyframes animateTwo {     
       from{              
  background-color: #ff0 ;   
         }        
    to{             
   background-color: transparent;   
            transform:scale(2.0)        
    } 
       }     


   </style>

</head>


<body>   

     <div id="iThree" style="width: 100px; margin: auto; height: 100px; border-radius:50px; background-color: #ff0;">       
     <div id="iTwo" style="width: 100px; margin: auto; height: 100px; border-radius:50px; background-color: #ff0;">   

             <div id="iOne" style="width: 100px; margin: auto; height: 100px; border-radius:50px; background-color: #ff0;">               
 </div>        
    </div>       
 </div>
</body>
</html>

最后编辑于：2017.12.04 03:43:09

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

CSS： 一枚 月亮 波纹

推荐阅读更多精彩内容

CSS：一枚月亮波纹