zoukankan      html  css  js  c++  java
  • 鼠标经过容器放大--css3

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <div class="container">
        <ul class="clearfix">
            <li>
                <img src="images/xy_52.jpg" alt=""/>
            </li>
            <li>
                <h5>我是标题</h5>
                <p>我是好人我是好人我是好人我是好人我是好人我是好人</p>
            </li>
        </ul>
    </div>
    </body>
    </html>
    html
            *{margin:0;padding:0;}
            .clearfix{zoom:1;}
            .clearfix:after{content:".";display:block;width:0;height:0;visibility:hidden;clear:both;}
            .container{width:600px;margin:20px auto;}
            ul{list-style:none;width:200px;background:red}
            ul li{float:left;width:100px;height:100px;transition:all 1s linear 0;background:green;}
            ul li:hover{transform:scale(1.2);background:yellow;}
            ul li:hover p,ul li:hover h5{color:#fff;}
            li img{border:0;width:100%;}
            h5{height:30px;line-height:30px;}
            h5,p{font-size:12px;padding:0 6px;}
            p{height:70px;}
    css
  • 相关阅读:
    iOS UILable 自定义高度 用masony适配
    iOS上架所需图片大小明细
    GCD倒计时
    iOS 小知识汇总
    七、Swift 枚举 Enumerations
    C语言深度剖析笔记
    六、闭包 Closures
    经济学常识
    Mac小技巧
    五、函数 Functions
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5749789.html
Copyright © 2011-2022 走看看