css动画让图片或者盒子做到一直跳动

最新推荐文章于 2023-10-26 14:04:21 发布

话不多说，直接干

最新推荐文章于 2023-10-26 14:04:21 发布

阅读量556

点赞数

文章标签： css elementui html

本文链接：https://blog.csdn.net/SSRwang/article/details/124876029

版权

<div id="home">
      <div class="a">
          <img src="@/assets/logo.png" alt="">
      </div>
  </div>

简单的一个盒子，一个图片

<style>
    #home{
        width: 100%;
        height: 100%
    }
    .a{
        width: 12.5rem;
        height: 6.25rem;
        position: relative;
        /* 根据自己的需求调整位置 */
        top: 200px;
        left: 0;
        animation: bounce-down 2s linear infinite;
    }
    .a img{
        position: absolute;
    }
    @keyframes bounce-down{
        25%{
            transform: translateY(-20px);
        }
        50%,100%{
            transform: translateY(0);
        }
        75%{
            transform: translateY(20px);        }
    }
</style>