阅读目录

阐述

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

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

HTML结构

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

<div class="waveWrapper waveAnimation"><div class="waveWrapperInner bgTop"><div class="wave waveTop" style="background-image: url('img/wave-top.png')"></div></div><div class="waveWrapperInner bgMiddle"><div class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></div></div><div class="waveWrapperInner bgBottom"><div class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></div></div></div>

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;}

预览