专栏首页前端开发随笔Css实现上下无限跳动

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • scrollReveal实现网页重复动画效果

    wePanda
  • 微信小程序弹出层动画

    wePanda
  • Vue动态赋值video视频

    wePanda
  • Hexo+GitHub 个人博客搭建

    你了解 Hexo 吗?Hexo 是一个静态博客框架,基于 Node.js,将Markdown文章通过渲染引擎,生成一个静态网页,再结合 Git 命令(ssh),...

    DeROy
  • WordPress手动更新最新版本 附临时终极解决方案

    沈唁
  • 猿蜕变系列3——SpringMVC之初体验

    看过之前的spring系列文章,相信你对java方面的基础有了一定的认识。经过之前的进化和思考的锻炼,也该是时候像模像样的做一些事情了。比如框架的学习。

    山旮旯的胖子
  • 请问#f00是什么颜色?

    这道题,对于知道的人来说简直就是送分题,这还用问吗?不就是红色吗?而对于不知道或者没有用心的人来说,却无从入手,怎么回答的都有。

    姬小光
  • 基于语义向量的内容召回和短文本分类的错误查找-搜狐的 Milvus 实战

    随着互联网和移动终端的发展,用户获取信息的需求越来越高——从以前单一地接受信息到现在主动获取自己感兴趣的资讯。搜狐新闻客户端的重要任务就是根据用户喜好向用户推荐...

    ZILLIZ
  • LeetCode 61:旋转链表 Rotate List

    Given a linked list, rotate the list to the right by k places, where k is non-ne...

    爱写bug
  • LeetCode 61:旋转链表 Rotate List

    Given a linked list, rotate the list to the right by k places, where k is non-ne...

    爱写bug

扫码关注云+社区

领取腾讯云代金券