css3动画图片波纹效果

最新推荐文章于 2024-05-27 11:09:28 发布

weixin_30739595

最新推荐文章于 2024-05-27 11:09:28 发布

阅读量278

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/yesyes/p/6518697.html

版权

这里的图片很有特点，下面有演示图片样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    body {
        background: #EF7148;
    }
    
    .icon {
        width: 185px;
        height: 185px;
        background: url('img/html5icon.png') center center no-repeat;
        margin: 100px auto 0 auto;
    }
    
    img {
        cursor: pointer;
        animation: scaleout 1.3s infinite ease-in-out;
    }
    
    @keyframes scaleout {
        0% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
        100% {
            transform: scale(1.1);
            -webkit-transform: scale(1.1);
            opacity: 0;
        }
    }
    </style>
</head>

<body>
    <div class="icon">
        <a href="#"><img src="img/html5icon.png"></a>
    </div>
</body>

</html>