将水波动画平移到H5-Doorin编辑器，666一键get技能

2023-09-16 15:35:07

如今的Web页面和H5页面的设计都更加倾向于对用户体验进行优化，通过各种各样的动效来使页面更具交互感和乐趣。比如常见的加载页面转圈效果、下拉刷新页面时出现的“海鸥飞翔”效果等，这些都是采用CSS3的特性来实现的。今天我们就来讨论一个前端开发比较常见也比较好玩儿的技能，如何用纯css实现H5-Dooring编辑器中的水波动画。这个技能学会了，保证你提高几个段位哦！

好了，话不多说，下面我们就一步一步来实现这个水波动画。

创建动画容器

首先，我们需要创建一个div容器来作为动画的容器。这个容器可以是任意大小，但为了方便演示，我们这里将其设置为500px宽和300px高。

<div id="water-container">
</div>

添加水波动画

接下来，我们需要在水波容器中添加水波动画。这里我们使用到了CSS3的animation属性。

#water-container {
  animation: water-wave 2s infinite alternate;
}

@keyframes water-wave {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

这段代码定义了一个名为“water-wave”的动画，该动画会在2秒内完成一个循环，并无限循环。动画的keyframes定义了动画的各个关键帧，其中0%和100%的关键帧定义了动画的起始和结束状态，50%的关键帧定义了动画的中途状态。

添加水波背景

最后，我们需要给水波容器添加一个水波背景图片。这里我们使用了一张纯色的背景图片，并在上面添加了一个径向渐变的半透明蒙版。

#water-container {
  background-image: url(water-background.png);
  background-position: center center;
  background-size: cover;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}