华为综合案例(缩放,旋转,位移,遮罩层等相关分析)

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
        }

        .box {
            position: relative;
            display: block;
            width: 350px;
            height: 247px;
            /* background-color: #7cf; */
            margin: 100px;

            /* 溢出隐藏 */
            overflow: hidden;
        }

        .box h5 {
            font-weight: normal;
        }

        .box .text {
            position: absolute;
            left: 0;
            bottom: -40px;
            /* background-color: rgba(102, 204, 255, 0.692); */
            padding: 0 20px;
            color: #fff;

            /* 层级 z-index  不然文字会被遮罩层压住*/
            z-index: 99;
            transition: .6s;

        }

        .box .text h4 {
            margin-bottom: 30px;
        }

        .box::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.541));
            /* opacity: 0 变成透明的 鼠标悬停的时候 调为1 */
            opacity: 0;
            transition: .6s;
        }

        .box img {
            transition: .6s;
        }

        /* 鼠标悬停大盒子box 图片放大 */
        .box:hover img {
            transform: scale(1.1);
        }

        /* 鼠标悬停大盒子box 遮罩层淡入淡出 */
        .box:hover::after {
            opacity: 1;
        }

        /* 鼠标悬停大盒子box text文字盒子 上移一段距离 */
        .box:hover .text {
            bottom: 30px;
        }

        .box .close {
            position: absolute;
            right: 10px;
            top: 10px;
            transition: 1s;
            font-size: 40px;
            line-height: 14px;
            height: 25px;
            color: #000;
            font-weight: 700;
        }

        .box:hover .close {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <a href="#" class="box">
        <img src="./images/pic2.png" alt="">
        <!-- 文字 -->
        <div class="text">
            <h5>产品</h5>
            <h4>OceanStor Pacific海量存储斩获2021 Interop金奖</h4>
            <p>了解更多</p>
        </div>
        <span class="close">×</span>
    </a>
</body>

</html>
web移动端华为综合案例(缩放,旋转,位移,遮罩层等相关分析)

华为综合案例(缩放,旋转,位移,遮罩层等相关分析)
