zoukankan      html  css  js  c++  java
  • 鼠标悬浮图片放大

    1、要给图片加上一个边框,这样图片放大的时候就不会挤压其它元素,并且

    • 边框overflow=hidden,超出了就隐藏
    • 图片放大的时候zIndex要足够大,这样就不会被其他元素遮挡

    2、使用hover伪类

    • 可以使用transform=scale(1.2)表示放大
    • 可以使用transition-duration属性添加渐变效果
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>中心点逐渐放大效果</title>
        <style type="text/css">
            *{
                padding:0;
                margin:0;
            }
            .content {
                margin: 40px auto;
                 450px;
                height: 301px;
                border:10px solid #808080;
                overflow:hidden;
                z-index:2;
            }
            .content img {
                 450px;
                height: 301px;
                transition-duration:0.5s;
                z-index:1;
            }
            .content img:hover {
                transform: scale(1.2);
                -webkit-transform: scale(1.2); /*Safari 和 Chrome*/
                -moz-transform: scale(1.2); /*Firefox*/
                -ms-transform: scale(1.2); /*IE9*/
                -o-transform: scale(1.2); /*Opera*/
            }
        </style>
    </head>
    <body>
        <div class="content">
            <img src="img/5.jpg" class="pic"/>
        </div>
    </body>
    </html>
    

    参考资料

    https://www.cnblogs.com/xuyuntao/p/4965818.html

  • 相关阅读:
    zoj_3710Friends
    javamail例子
    HttpURLConnection类的用法
    发送邮件协议
    栈的定义
    tomcat中添加jconsole服务
    HttpURLConnection类的用法
    javamail例子
    tomcat中添加jconsole服务
    栈的定义
  • 原文地址:https://www.cnblogs.com/weiyinfu/p/9124092.html
Copyright © 2011-2022 走看看