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
  • 相关阅读:
    『Python基础』第3节:变量和基础数据类型
    Python全栈之路(目录)
    前端
    Python十讲
    Ashampoo Driver Updater
    druid 连接池的配置
    webService 入门级
    pom
    pom----Maven内置属性及使用
    webservice 总结
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5749789.html
Copyright © 2011-2022 走看看