CSS3实现的线条波浪动画效果

「爱情、让人受尽委屈。」 2023-10-06 23:49 9阅读 0赞

#### 阅读目录 ####

*  阐述
 *   *  HTML结构
     *  CSS 样式
 *  预览

## 阐述 ##

这是一款使用CSS3 animation 动画和 png 图片制作的 css3 线条波浪动画效果。

该特效中，使用了 3 张波浪线条的 png 图片，以及少量的 CSS 代码，制作出逼真的线条波浪动画效果。

### HTML结构 ###

该 css3 线条波浪动画效果的HTML结构如下：

### CSS 样式 ###

然后通过下面的CSS代码来制作线条波浪动画效果。

@keyframes move_wave {
        
        0% {
        
            transform: translateX(0) translateZ(0) scaleY(1)
        }
        50% {
        
            transform: translateX(-25%) translateZ(0) scaleY(0.55)
        }
        100% {
        
            transform: translateX(-50%) translateZ(0) scaleY(1)
        }
    }
    .waveWrapper {
        
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
    }
    .waveWrapperInner {
        
        position: absolute;
        width: 100%;
        overflow: hidden;
        height: 100%;
        bottom: -1px;
        background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
    }
    .bgTop {
        
        z-index: 15;
        opacity: 0.5;
    }
    .bgMiddle {
        
        z-index: 10;
        opacity: 0.75;
    }
    .bgBottom {
        
        z-index: 5;
    }
    .wave {
        
        position: absolute;
        left: 0;
        width: 200%;
        height: 100%;
        background-repeat: repeat no-repeat;
        background-position: 0 bottom;
        transform-origin: center bottom;
    }
    .waveTop {
        
        background-size: 50% 100px;
    }
    .waveAnimation .waveTop {
        
      animation: move-wave 3s;
       -webkit-animation: move-wave 3s;
       -webkit-animation-delay: 1s;
       animation-delay: 1s;
    }
    .waveMiddle {
        
        background-size: 50% 120px;
    }
    .waveAnimation .waveMiddle {
        
        animation: move_wave 10s linear infinite;
    }
    .waveBottom {
        
        background-size: 50% 100px;
    }
    .waveAnimation .waveBottom {
        
        animation: move_wave 15s linear infinite;
    }

## 预览 ##

![在这里插入图片描述][65152fbde9b14e098f9020d155c353c0.png]  
![在这里插入图片描述][a60140833da7483a9b406b75cf2c0665.png]  
![在这里插入图片描述][c5313cf365694d0dbba73c77e611c80f.png_pic_center]  
![在这里插入图片描述][1dd5fadfcb8349ad8f397ba18eb2059b.png_pic_center]  
![在这里插入图片描述][706c6a5e91f8456dbbb26957cc127442.png_pic_center]  
![在这里插入图片描述][be02ac2707084c659ead4b13476003ac.gif_pic_center]

[65152fbde9b14e098f9020d155c353c0.png]: https://img-blog.csdnimg.cn/65152fbde9b14e098f9020d155c353c0.png
[a60140833da7483a9b406b75cf2c0665.png]: https://img-blog.csdnimg.cn/a60140833da7483a9b406b75cf2c0665.png
[c5313cf365694d0dbba73c77e611c80f.png_pic_center]: https://img-blog.csdnimg.cn/c5313cf365694d0dbba73c77e611c80f.png#pic_center
[1dd5fadfcb8349ad8f397ba18eb2059b.png_pic_center]: https://img-blog.csdnimg.cn/1dd5fadfcb8349ad8f397ba18eb2059b.png#pic_center
[706c6a5e91f8456dbbb26957cc127442.png_pic_center]: https://img-blog.csdnimg.cn/706c6a5e91f8456dbbb26957cc127442.png#pic_center
[be02ac2707084c659ead4b13476003ac.gif_pic_center]: https://img-blog.csdnimg.cn/be02ac2707084c659ead4b13476003ac.gif#pic_center