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

最新推荐文章于 2024-08-14 09:51:23 发布

原创最新推荐文章于 2024-08-14 09:51:23 发布 · 771 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #elementui #html

这个博客展示了如何使用CSS创建一个简单的盒子，内含一张图片，并应用动画使其上下弹跳。通过设置`@keyframes`规则和相对定位，实现了图片的动态效果。这是一个关于前端开发中CSS动画基础的实例。

<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>