缩放实例

代码：

<!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>

 

效果：

由初始样式（下图）：

 

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

 

posted @ 2020-08-26 13:47  石海莹  阅读(162)  评论(0)  编辑  收藏  举报