小米商城 MIUI IoT 云服务 金融 有品 企业团购 资质证照 协议规则 下载app

小米商城

 智能生活
登录 注册 消息通知 购物车(0)

购物车中没有商品,赶紧选购吧

js

 
效果：

 

 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .servicea1_list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 60px;
            border-radius: 20px;
            overflow: hidden;
        }

        .servicea1_ul {
            position: relative;
            display: flex;
            justify-content: space-between;
            transition: all 0.5s ease;
            overflow: hidden;
            width: 11%;
            /* width: 256px; */
            /* margin-right: 12px; */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            flex-grow: 1;
        }

        .servicea1_ul .img1 {
            /* width: 268px; */
            width: 100%;
            height: 468px;
            object-fit: cover;
        }

        .servicea1_li {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            background: #fff;
            padding: 50px 35px;
            width: 50%;
            height: 100%;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease;
            position: absolute;
            top: 0;
            left: 50%;
        }

        .regardb_list {
            position: absolute;
            top: 0;
            left: 0;
        }

        .servicea1_li a {
            margin-top: 50px;
        }

        .servicea1_li p {
            width: 198px;
        }

        .servicea1_on .servicea1_li {
            visibility: visible;
            opacity: 1;
            transition: all 0.5s ease;
        }


        .servicea1_on {
            width: 565px;
            transition: all 0.5s ease;
        }

        .servicea1_on .servicea1_icon {
            opacity: 0;
        }

        .servicea1_icon2 {
            opacity: 0;
        }

        .servicea1_on .servicea1_icon2 {
            opacity: 1;
        }

        .servicea1_on:before {
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .servicea1_ul li::before {
            content: '';
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .servicea1_on {
            position: relative;
        }

        .servicea1_on::before {
            background: linear-gradient(180deg, rgba(15, 19, 152, 0), rgba(15, 19, 152, 0.1), rgba(15, 19, 152, 1));
        }

        .servicea1_ul li::before {
            background: linear-gradient(180deg, rgba(15, 19, 152, 0), rgba(15, 19, 152, 0.8), rgba(15, 19, 152, 1));
        }

        .servicea1_on li::before {
            background: none;
        }

        .servicea1_icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin-top: 20px;
            writing-mode: vertical-lr;
            /* width: 100%; */
            /* writing-mode: vertical-rl; */
            /* 从右向左垂直排列 */
            /* /* 从左向右垂直排列 */
        }

        .servicea1_icon2 {
            position: absolute;
            top: 15%;
            left: 10%;
            width: 400px;
            color: #fff;
        }

        .servicea1_icon p {
            color: #fff;
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            letter-spacing: 7px;
        }

        .servicea1_icon2 .service_icon1 {
            height: 46px;
        }

        .servicea1_p1 {
            font-size: 24px;
            font-weight: bold;
            display: inline-block;
            border-bottom: 3px solid #ffcb05;
        }

        .servicea1_ul1 {
            margin-top: 30px;
        }
    </style>

    <div class="servicea1_list">
        <a href="javascript:;" class="servicea1_ul servicea1_on">
            <li>
                <img class="img1" src="static/demo/index/sokution1.jpg" alt="">

                <div class="servicea1_icon">
                    <p>平屋顶</p>
                </div>
                <div class="servicea1_icon2">
                    <p class="servicea1_p1">平屋顶</p>
                </div>
            </li>
        </a>
        <a href="javascript:;" class="servicea1_ul ">
            <li>
                <img class="img1" src="static/demo/index/sokution2.jpg" alt="">

                <div class="servicea1_icon">
                    <p>斜屋顶</p>
                </div>
                <div class="servicea1_icon2">
                    <p class="servicea1_p1">斜屋顶</p>
                </div>
            </li>
        </a>
        <a href="javascript:;" class="servicea1_ul">
            <li>
                <img class="img1" src="static/demo/index/sokution3.jpg" alt="">
                <div class="servicea1_icon">
                    <p>庭院</p>
                </div>
                <div class="servicea1_icon2">
                    <p class="servicea1_p1">庭院</p>
                </div>
            </li>
        </a>
        <a href="javascript:;" class="servicea1_ul">
            <li>
                <img class="img1" src="static/demo/index/sokution4.jpg" alt="">

                <div class="servicea1_icon">
                    <p>阳光棚</p>
                </div>
                <div class="servicea1_icon2">
                    <p class="servicea1_p1">阳光棚</p>
                </div>
            </li>

        </a>
        <a href="javascript:;" class="servicea1_ul">
            <li>
                <img class="img1" src="static/demo/index/sokution5.jpg" alt="">
                <div class="servicea1_icon">
                    <p>工商业</p>
                </div>
                <div class="servicea1_icon2">
                    <p class="servicea1_p1">工商业</p>
                </div>
            </li>
        </a>
        <a href="javascript:;" class="servicea1_ul">
            <li>
                <img class="img1" src="static/demo/index/sokution6.jpg" alt="">

                <div class="servicea1_icon">
                    <p>整村汇流</p>
                </div>
                <div class="servicea1_icon2">
                    <p class="servicea1_p1">整村汇流</p>
                </div>
            </li>
        </a>
    </div>
   
    <script src="static/js/jquery-3.3.1.min.js"></script>

    <script>
        $('.servicea1_ul').mousemove(function () {
            $(this).addClass('servicea1_on').siblings().removeClass('servicea1_on')
        })
        $('.servicea1_ul').click(function () {
            $(this).addClass('servicea1_on').siblings().removeClass('servicea1_on')
        })
    </script>

</body>

</html>
posted @ 2024-05-27 10:57  阳菜  阅读(19)  评论(0)    收藏  举报