zoukankan      html  css  js  c++  java
  • 呼吸灯效果(图片划过放大,划出变小)

    <!DOCTYPE HTML><html lang="zh-CN">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
    <style type="text/css">
    ol, ul {list-style: none;}
    li { 180px;height: 120px;display: inline-block;list-style: none;overflow:hidden;}
    li img {
    display: block;
    140px;
    height: 80px;
    background-color: #FFF;
    box-shadow: 0px 0px 18px rgba(0,0,0,.4);
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition-delay: all ease 1s;
    transition: all ease 1s
    }
    li img:hover {
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -transform: scale(1.2,1.2);
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition-delay: all ease 1s;
    transition: all ease 1s
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    <li><a href="#"><img src="#" width="140" height="80" alt=""></a></li>
    </ul>
    </body>
    </html>

  • 相关阅读:
    数据库 连接(join)
    Linux top
    Game2048
    黑豆白豆问题
    1000个苹果10箱
    Jconsole
    八数码 Java实现
    两数之和
    磁盘调度算法
    常见应用网络层次
  • 原文地址:https://www.cnblogs.com/rain92/p/5549534.html
Copyright © 2011-2022 走看看