css动画-圆形扩散(音效)

圆会慢慢扩大,然后消失。

screenshot

代码如下:

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





发表于: 3月前   最后更新时间: 3月前   游览量:254
上一条: css动画-音波效果
下一条: CSS3 @keyframes动画规则说明