这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS代码，制作出逼真的线条波浪动画效果。
HTML结构
该css3线条波浪动画效果的HTML结构如下：
<p class="waveWrapper waveAnimation"> <p class="waveWrapperInner bgTop"> <p class="wave waveTop" style="background-image: url('img/wave-top.png')"></p> </p> <p class="waveWrapperInner bgMiddle"> <p class="wave waveMiddle" style="background-image: url('img/wave-mid.png')"></p> </p> <p class="waveWrapperInner bgBottom"> <p class="wave waveBottom" style="background-image: url('img/wave-bot.png')"></p> </p></p>
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;}
以上就上有关CSS3实现的线条波浪动画效果的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。