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>


最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容