zoukankan      html  css  js  c++  java
  • 缩放实例

    代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>缩放实例</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .c {
                width: 1140px;
                margin: 50px auto 0;
                height: 385px;
            }
    
            .left {
                position: relative;
                overflow: hidden;
                float: left;
                width: 680px;
                height: 100%;          
            }
    
            .right {
                width: 450px;
                float: right;
                height: 100%;          
            }
    
            .right .top {
                overflow: hidden;
                position: relative;
                height: 188px;
                margin-bottom: 10px;
            }
    
            .right .bottom {
                overflow: hidden;
                position: relative;
                height: 188px;
            }
            .c img {
                width: 100%;
                height: 100%;
                transition: transform 0.35s linear 0s;
            }
    
            .borderWhite::after {
                content: '';
                /* 公共样式  四条边界距离10px */
                position: absolute;
                left: 10px;
                top: 10px;
                bottom: 10px;
                right: 10px;
                border:2px solid #fff;
                transform:scale(1.1);
                display: none;
            }
            /* 找伪元素 */
            .left:hover:after {
                transform:scale(1);
                /* 鼠标移出没有过度 */
                transition: transform 0.35s linear 0s;
                display: block;
            }
            
            .left:hover img {
                transform:scale(1.2);
            }
    
            .top:hover:after {
                transform:scale(1);
                transition: transform 0.35s linear 0s;
                display: block;
            }
            
            .top:hover img {
                transform:scale(1.2);
            }
    
            .bottom:hover:after {
                transform:scale(1);
                transition: transform 0.35s linear 0s;
                display: block;
            }
            
            .bottom:hover img {
                transform:scale(1.2);
            }
        </style>
    </head>
    
    <body>
        <div class="c">
            <div class="left borderWhite">
                <a href="">
                    <img src="img/qz.jpg" alt="">
                </a>
            </div>
            <div class="right">
                <div class="top borderWhite">
                    <a href="">
                        <img src="img/qz_1.jpg" alt="">
                    </a>
                </div>
                <div class="bottom borderWhite">
                    <a href="">
                        <img src="img/qz_2.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </body>
    
    </html>

    效果:

    由初始样式(下图):

    鼠标划入:白色边框缩放显示,图片放大显示,溢出隐藏,如下图:

  • 相关阅读:
    WebClient.UploadData 方法 上载文件数据
    webclient提交并接受返回
    webClient上载下载
    斯特林反演与伯恩赛德引理
    Re0: 从 1 开始的省选前生活
    Windows 8将可能带动触摸屏的发展
    后PC时代的那些事
    关于ASP网页在IIS7.5下访问数失效
    Windows 要终结了?微软要推超级系统?
    未来10年的开放式互联网
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13564643.html
Copyright © 2011-2022 走看看