編碼的世界 / 優質文選 / 生涯

css3動畫 -漸隱漸現

2022年6月28日
-   

 
測試
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>





 .anim-opacity2{animation: 2s opacity2 0s infinite; -webkit-animation: 2s opacity2 0s infinite;-moz-animation: 2s opacity2 0s infinite;}
 @keyframes opacity2{
 0%{opacity:0}
 50%{opacity:.8;}
 100%{opacity:0;}
 }
 @-webkit-keyframes opacity2{
 0%{opacity:0}
 50%{opacity:.8;}
 100%{opacity:0;}
 }
 @-moz-keyframes opacity2{
 0%{opacity:0}
 50%{opacity:.8;}
 100%{opacity:0;}
 }
 </style>





</head>
<body>
 <h1 class="anim-opacity2">測試</h1>
</body>
</html>

 
demo2
 
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title></title>     <style>         .anim-opacity2{           width: 100px;           height: 100px;           background-color: #FFAC8B;           border-radius: 50%;           animation: 2s opacity2 0s infinite;            -webkit-animation: 2s opacity2 0s infinite;           -moz-animation: 2s opacity2 0s infinite;           position: relative;         }         div{           line-height: 50px;           width: 50px;           height: 50px;           position: absolute;           top:40px;           left:30px;           background-color: #FF6D15;           border-radius: 50%;           z-index: 999;            text-align: center;         }         @keyframes opacity2{             0%{opacity:0}             50%{opacity:.8;}             100%{opacity:0;}         }         @-webkit-keyframes opacity2{             0%{opacity:0}             50%{opacity:.8;}             100%{opacity:0;}         }         @-moz-keyframes opacity2{             0%{opacity:0}             50%{opacity:.8;}             100%{opacity:0;}         }     </style> </head> <body>
    <h1 class="anim-opacity2"></h1>     <div>測試</div>
</body> </html>

熱門文章