当前位置: 首页>后端>正文

仿美团小程序搜索框动态广告特效

仿美团小程序搜索框动态广告特效,第1张
GIF 2023-7-17 1-22-18.gif
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            html,
            body {
                background-color: #ccc;
                width: 100%;
                height: 100%;
            }
            * {
                margin: 0;
                padding: 0;
            }
            .boss {
                width: 300px;
                height: 60px;
                margin: 600px auto;
                background-color: #fff;
                position: relative;
                overflow: hidden;
            }
            .container {
                width: 100%;
                height: 60px;
                /* animation: hhh3 12s linear infinite; */
                animation: hhh5 12s linear infinite;
                position: absolute;
                left: 0;
                top: 0;
            }
            .container > span {
                display: block;
                width: 100%;
                line-height: 60px;
                text-align: center;
                color: #666;
            }
          @keyframes hhh5 {
                0% {
                    opacity: 1;
                }
                15% {
                    opacity: 1;
                    top: 0;
                }
                17% {
                    opacity: 0;
                    top: -40%;
                }
                18% {
                    opacity: 0;
                    top: -90%;
                }
                20% {
                    opacity: 1;
                    top: -100%;
                }
                35% {
                    opacity: 1;
                    top: -100%;
                }
                37% {
                    opacity: 0;
                    top: -140%;
                }
                38% {
                    opacity: 0;
                    top: -190%;
                }
                40% {
                    opacity: 1;
                    top: -200%;
                }
                55% {
                    opacity: 1;
                    top: -200%;
                }
                57% {
                    opacity: 0;
                    top: -240%;
                }
                58% {
                    opacity: 0;
                    top: -290%;
                }
                60% {
                    opacity: 1;
                    top: -300%;
                }
                75% {
                    opacity: 1;
                    top: -300%;
                }
                77% {
                    opacity: 0;
                    top: -340%;
                }
                78% {
                    opacity: 0;
                    top: -390%;
                }
                80% {
                    opacity: 1;
                    top: -400%;
                }
                95% {
                    opacity: 1;
                    top: -400%;
                }
                97% {
                    opacity: 0;
                    top: -440%;
                }
                98% {
                    opacity: 0;
                    top: -490%;
                }
                100% {
                    opacity: 1;
                    top: -500%;
                }
            }
            /* @keyframes hhh3 {
                0% {
                    opacity: 1;
                }
                23% {
                    opacity: 1;
                    top: 0;
                }
                26% {
                    opacity: 0;
                    top: -30%;
                }
                30% {
                    opacity: 0;
                    top: -70%;
                }
                33% {
                    opacity: 0.6;
                    top: -100%;
                }
                57% {
                    opacity: 1;
                    top: -100%;
                }
                60% {
                    opacity: 0;
                    top: -130%;
                }
                63% {
                    opacity: 0;
                    top: -160%;
                }
                67% {
                    opacity: 0.6;
                    top: -200%;
                }
                90% {
                    opacity: 1;
                    top: -200%;
                }

                93% {
                    opacity: 0;
                    top: -230%;
                }
                96% {
                    opacity: 0;
                    top: -260%;
                }
                100% {
                    opacity: 0.9;
                    top: -300%;
                }
            } */
        </style>
    </head>
    <body>
        <div class="boss">
            <div class="container">
                <span>第一个</span>
                <span>第二个</span>
                <span>第三个</span>
                <span>第四个</span>
                <span>第五个</span>
                <span>第一个</span>
            </div>
        </div>
    </body>
</html>

hhh3 动态三条广告轮播

hhh5 动态五台广告轮播


https://www.xamrdz.com/backend/3ku1930837.html

相关文章: