This website requires JavaScript.

纯 CSS 写出的层叠海浪特效

2018.05.18 09:51字数 1467阅读 2788喜欢 0评论 0

在小程序里,能用纯css解决的,就不要用链接图片,很尴尬的,吐槽一下

效果

20180518 09.37.41.gif

代码解读

定义 dom,容器中包含4条波浪特效的 <view>

<view class="wave-div">
      <view class="wave"></view>
      <view class="wave"></view>
      <view class="wave one"></view>
      <view class="wave one"></view>
      <view class="wave two"></view>
      <view class="wave two"></view>
      <view class="wave three"></view>
      <view class="wave three"></view>
</view>

设置容器样式:

.wave-div {
  padding-top: 320rpx;
  position: relative;
  width: 750rpx;
  height: 50rpx;
  background-color: #464646;
  overflow: hidden;
}

制作海浪动画效果:

.wave-div .wave {
  position: absolute;
  top: 320rpx;
  left: -400rpx;
  width: 1000rpx;
  height: 1000rpx;

  background: #8a8a8a;
  border-radius: 43%;
  filter: opacity(0.4);
  animation: drift linear infinite;
}

.wave-div .wave.one {
  left: -150rpx;
}

.wave-div .wave.two {
  left: 0rpx;
}

.wave-div .wave.three {
  left: 150rpx;
}

.wave-div .wave:nth-of-type(3n+1) {
  animation-duration: 5s;
}

.wave-div .wave:nth-of-type(3n+2) {
  animation-duration: 9s;
}

@keyframes drift {
  from {
    transform: rotate(360deg);
  }
}

加大海浪的波动幅度,增加颜色差异:

.wave-div .wave {
    transform-origin: 50% 48%;
}

.wave-div .wave:nth-of-type(3n+2) {
  background-color: #d0d0d0;
  filter: opacity(0.1);
}

最后,隐藏容器外的内容:

.wave-div {
    overflow: hidden;
}

大功告成!