HTML-13 原生响应式，动画上移效果

V_zcm

已于 2022-06-01 10:47:50 修改

阅读量1.7k

点赞数

分类专栏： HTML 文章标签： html 前端

于 2021-12-13 12:34:30 首次发布

本文链接：https://blog.csdn.net/m0_59214979/article/details/121901451

版权

HTML 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本节：最完美的响应式，两个并列的情况，一个完全铺满的情况；动画效果。

一、响应式

1. 一整行的div上设置 flex-wrap:warp ,超过页面大小div就自动换行

2. 在 @media screen and (max-width: 750px){}

里面重新定义屏幕缩放之后的div属性即可响应，设置两个情况。

二、动画效果

（1.）按钮本来是不存在，一碰又出现了

原来按钮div设置display: none;//不显示，然后冒号效果 .btn:hover {display: block;//显示 }

（2.）一碰一整个div上移

//第一个piece是一整个div，piece2是文本内容的部分，一碰一整个div，文本的就上移

.piece:hover .piece2 {

/* 一触碰，一整个div上移 */

margin-top: -45px;

/*动画名字*/

animation: move-up;

/*执行时间*/

animation-duration: 0.05s;

/*速度曲线*/

animation-timing-function: ease-out;

animation-fill-mode: none;

}

好像没有什么影响，但是这个代码也是一碰，div就上移的

@keyframes move-up {

from {

margin: 0;

}

to {

margin-top: -45px;

}

}

（3.）图片置顶，隐藏下一层。

position: relative;

完整代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="out">
            <div class="row">
                <div v-for="k in 3" class="piece">

                    <div> <img class="img1" src="./imgs/p1.png" alt=""></div>
                    <div class="piece2">
                        <div class="titl">惠州仲恺电子产业集群5G项目</div>
                        <div class="content"> 广东联通在惠州仲恺电子产业园区共建设14个宏站，18套室分，覆盖2大园区，4大工厂，同时提供公网与专网服，实现园区5G
                            100%覆盖，多套独立下沉…</div>
                        <div class="but2">
                            <div class="but22">行业5G专网</div>
                            <div class="but23">5G连接工程</div>
                        </div>
                    </div>
                    <div class="learn">了解更多</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue!",
            },
        });
    </script>

    <style>
        .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

        }

        .out {
            /* 这一整行 */
            width: 1300px;
            height: 800px;
            margin: 0 auto;
        }

        .content {
            padding: 10px;
            margin: 10px 0px;
            color: #565656;

        }

        .piece:hover .piece2 {
            /* 一触碰，一整个div上移 */
            margin-top: -45px;
            /*动画名字*/
            animation: move-up;
            /*执行时间*/
            animation-duration: 0.05s;
            /*速度曲线*/
            animation-timing-function: ease-out;
            animation-fill-mode: none;
        }


        /* .piece:hover .titl {
         display: none;
        } */
        .piece:hover .learn {
            display: block;
        }

        .titl {
            padding: 10px;

            margin: 10px 0px;
            font-weight: 900;
        }

        .piece {
            width: 400px;
           margin: 0 auto;

        }

        .but2 {
            display: flex;
            padding: 10px;

        }

        .but22 {
            border: 2px solid #e9e9e9;
            margin: 5px 0px 5px 0px;
        }

        .but23 {
            border: 2px solid #e9e9e9;
            margin: 5px 0px 5px 5px;
        }

        .img1 {

            width: 100%;
            position: relative;
        }

        .learn {
            background: #2d65fe;
            text-align: center;
            color: #fff;
            height: 48px;
            line-height: 48px;
            margin-top: 15px;
            display: none;
            cursor: pointer;

        }

        .learn:hover {
            display: block;

        }

        @keyframes move-up {
            from {
                margin: 0;
            }

            to {
                margin-top: -45px;
            }
        }

        @media screen and (max-width: 900px) {
            /* 两个并列的情况 */
            .out {
                 /* 这一整行，铺满 */
                width: 100%;
            }

            .piece {/*单个div */
                /*左右两边 居中 */
                margin: 0px auto;
                border: #e9e9e9 solid 2px;
                margin-top: 30px;
                width: 45%;
                /* 设置两个并列，各设置45%的比例 */

            }
        }

        @media screen and (max-width: 750px) {
                /* 单个铺满的情况 */
            .out {
                   /* 这一整行，铺满 */
                width: 100%;
            }

            .piece {/*单个div */
                margin: 0px auto;
                border: #e9e9e9 solid 2px;
                margin-top: 30px;
                width: 100%;
                /*单个div完整铺满一行的比例  */
            }
        }
    </style>
</body>

</html>