css3波纹先后滚动的特效

最新推荐文章于 2024-06-27 18:15:00 发布

原创最新推荐文章于 2024-06-27 18:15:00 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS3 专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何利用CSS创建一个动态的波浪滚动效果。通过设置两个具有相同背景图片但不同大小的盒子，结合CSS动画实现背景图片的平移，从而达到从左到右的波浪滚动视觉。关键点在于盒子宽度为200%，图片宽度50%，并配合不同的动画时间来营造连续的波浪滚动感。

先看图：
这个位置，两张图片一前一后，从左到右不停的滚动，形成一种类似于波浪的动态效果
做法：两个盒子用背景图片，盒子宽度200%，背景图片宽度50%，背景图片横向重复，然后动画移动即可。
关键点：盒子宽度200%，图片50%，以及时间
在这里插入图片描述

代码：

<template>
  <div class="overBox">
    <div class="wave waveTop" style="background-image: url('/static/img/image/波浪4.png')"></div>
    <div class="wave waveBottom" style="background-image: url('/static/img/image/波浪4.png')"></div>
    <slot></slot>
  </div>
</template>
<style lang="scss" scoped>
  .overBox{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: auto;
    position: relative;
  }
  .wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
  }
  @keyframes move_wave {
    0% {
        transform: translateX(-50%)
    }
    50% {
        transform: translateX(-25%)
    }
    100% {
        transform: translateX(0%)
    }
  }
  .waveTop {
    background-size: 50% 35px;
    animation: move_wave 5s linear infinite;
    z-index: 5;
  }
  .waveBottom {
    background-size: 50% 30px;
    animation: move_wave 10s linear infinite;
    z-index: 15;
    opacity: 0.8;
  }
</style>