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
  • 相关阅读:
    103
    101
    102
    100
    ByteView和Sink
    二叉排序树删除、搜索、插入的迭代实现
    怎样就地反转单链表?
    有序单链表的合并
    有序数组的合并
    静态表之整型数组的插入、删除、查找
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5749789.html
Copyright © 2011-2022 走看看