夏日消暑，用 CSS 来冲浪吧

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

前言

此篇文章将用纯CSS和HTML实现一个简单动画---海浪花，海浪时时来来去去，看着非常清新和消暑。

代码片段

实现

HTML部分非常简单，就是一个单纯的div元素，类名为wave海浪。

然后依靠两个伪元素before和after，其中一个为视觉上为空白，另一个视觉上为海浪。

首先我们让wave是一个正方形盒子，背景色为海的颜色。

.wave {
  width: 200px;
  height: 200px;
  background-color: #5291e0;
  margin-left: 200px;
  margin-top: 200px;
  position: relative;
}
复制代码

然后呢，我们将after伪元素宽高相对放大5倍，然后令它为一个扁的椭圆，为了便于观看，我把颜色设为橙色（宽高仅放大2倍）。

.wave::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 35%;
  width: 200%;
  height: 200%;
  border-radius: 45%;
  background-color: #fff;
  transform: translateX(-50%);
}
复制代码

然后加上动画让它旋转起来，同时wave框外部不显示。具体动画的参数就不详细解释了，你只需要知道这个扁圆从0度旋转到360度，也就是旋转一圈，需要10秒，并且将持续这样旋转下去。控制这个旋转时间就能控制圆的旋转速率。

.wave{
  overflow: hidden;
}

.wave::after {
  ...
  animation: rotate 15s linear infinite;
}

@keyframes rotate {
  from {
    transform: translateX(-50%) rotateZ(0deg);
  }

  to {
    transform: translateX(-50%) rotateZ(360deg);
  }
}
复制代码

此时已经能初步看到海水波动的特效了，但是还缺少海浪。

海浪怎么实现呢，非常简单，这样想，我们把刚才的after伪元素再复制一个，让它定位相对after更加低一点，然后再给它加上一个透明度，这样因为透明度色差的原因，会形成一小部分的海浪层。

.wave::before {
  bottom: 25%;
  opacity: .5;
  border-radius: 47%;
}
复制代码

看着是不是有点怪挂的，但是我们已经可以区分出海水和浪花了。

然后我们再来做一步操作，就是把刚才的橙色统一替换成白色。

.wave::before,
.wave::after {
  ...
  background-color: #fff;
}
复制代码

来看看效果呢。

还是有点怪怪的，就是这个浪花和海水的幅度太大了，看着没那感觉，注意哦，刚才我们为了直观查看元素，仅仅是将after和before两个伪元素放大了2倍，实际也说了，放大5倍，修改after和before两个伪元素的宽和高均为500%，我们再来看看效果呢。

大功告成，由于是静态图，没那味，文初有原始代码和预览效果，可以看看最终的动态效果，非常nice。

夏日消暑，用 CSS 来冲浪吧

前言

实现

猜你喜欢