Css实现上下无限跳动

时间:2022-07-24
本文章向大家介绍Css实现上下无限跳动，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

来一张效果图

图中的三角形会一直上下跳动

        .arrow {
            position: absolute;
            bottom: 15%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            margin-left: -1%;
            animation-name: beat; /*动画名称*/
            animation-duration: 2s; /*设置秒数*/
            animation-timing-function: linear;/*速度曲线*/
            animation-iteration-count: infinite;/*播放次数*/
            animation-direction: alternate;/*逆向播放*/
            animation-play-state: running;/*正在运行*/
        }

        @keyframes beat {
            0% {
                bottom: 15%;
            }

            25% {
                bottom: 14%;
            }

            50% {
                bottom: 15%;
            }

            75% {
                bottom: 14%;
            }

            100% {
                bottom: 15%;
            }
        }

        .arrow img {
            width: 50%;
        }
   <div class="arrow">
       <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190823153828-b986b1c4b49fe49e959f8673a02c756.png" alt="箭头">
    </div>

随机文章
WEB前端知识点必读
最近更新