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>

  • 相关阅读:
    SpringBoot,来实现MySQL读写分离技术
    range范围
    tuple元组
    序列通用操作及可变序列通用操作
    list列表
    数据
    python基础知识
    charm写代码时添加快捷键
    2、添加到项目里 在⚙图标里选择Add Remote...charm初期设置(远程服务器)
    5、优化
  • 原文地址:https://www.cnblogs.com/rain92/p/5549534.html
Copyright © 2011-2022 走看看