图片+css实现波浪

最新推荐文章于 2024-08-06 15:26:56 发布

slender_jing

最新推荐文章于 2024-08-06 15:26:56 发布

阅读量3k

点赞数 1

分类专栏：前端学习文章标签：波浪特效

本文链接：https://blog.csdn.net/slender_jing/article/details/84207123

版权

本文总结了如何通过图片和CSS实现波浪动画，重点介绍了利用图片实现波浪特效的过程，包括HTML和CSS代码示例。此外，还提到了其他如纯CSS和JS实现波浪特效的方法，并提供了相关学习资源。

摘要由CSDN通过智能技术生成

概述

这周的作业有一个登录页面里面需要实现波浪的动画，在网上学了一下，现在进行一下波浪动画实现的总结（主要记录总结我自己使用的波浪动画）。
波浪特效有主要三种实现方法：纯css实现、js实现、图片+css实现

实现及过程（图片实现波浪特效）

html

<div class="waveWrapper waveAnimation">
    <div class="waveWrapperInner">
        <div class="wave waveMiddle" style="background-image: url('../images/wave1.png')"></div>
    </div>
    <div class="waveWrapperInner">
        <div class="wave waveBottom" style="background-image: url('../images/wave2.png')"></div>
    </div>
</div>

css

/**
波浪
 */
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {