css动画-圆形扩散（音效）修订版本明细

源
采纳
编辑于
半兽人
css动画-圆形扩散（音效）

css css3
css
动画
圆会慢慢扩大，然后消失。
<!DOCTYPE html>
<html>
<head>
<style> 
    div{
        position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            opacity: .5;
            border-radius: 50%;
            width: 90px;
            height: 90px;
            border: 4px solid #00c1de;
            -moz-animation:mymove 5s infinite; /* Firefox */
            -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
            -o-animation:mymove 5s infinite; /* Opera */
        }

    @keyframes mymove {
        from {
                 width: 90px;
                 height: 90px;
                 opacity: .5
        }
        to {
                 width: 326px;
                 height: 326px;
                 opacity: .1
        }
    }

    @-moz-keyframes mymove /* Firefox */
    {
        from {
                 width: 90px;
                 height: 90px;
                 opacity: .5
        }
        to {
                 width: 326px;
                 height: 326px;
                 opacity: .1
        }
    }

    @-webkit-keyframes mymove /* Safari and Chrome */
    {
        from {
                 width: 90px;
                 height: 90px;
                 opacity: .5
        }
        to {
                 width: 326px;
                 height: 326px;
                 opacity: .1
        }
    }

    @-o-keyframes mymove /* Opera */
    {
        from {
                    width: 90px;
                 height: 90px;
                 opacity: .5
        }
        to {
                 width: 326px;
                 height: 326px;
                 opacity: .1
        }
    }
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>
在线运行
预览