zoukankan html css js c++ java

css3动画图片波纹效果

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

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

查看全文

相关阅读:
Python的历史
 python excel
excel xdr wdr
sql 常用命令
 selenium 配置firefox
SQL 一直恢复状态解决方法
 sqlserver 学习
 ITCHAT用法
 健身卡属性,以及业务规则，
安装REDIS

原文地址：https://www.cnblogs.com/yesyes/p/6518697.html