css3动画 -渐隐渐现

浅浅的花香味﹌ 2022-03-19 06:30 349阅读 0赞

# 测试 #

![复制代码][copycode.gif]

<!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>`

[copycode.gif]: /images/20220319/3ba24176b64c438f93f567a40ebb76ab.png