css波浪效果
时间：2023-04-02 23:43:09
HTML
/*波浪*/@keyframesmove_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;位置：绝对；左：0；右：0；底部：0；顶部:0;边距：自动；}.waveWrapperInner{位置：绝对；宽度：100%；溢出：隐藏；高度：100%；底部：-1px；}.bgTop{z-index：15；不透明度：0.5；}.bgMiddle{z-index：10；不透明度：0.75；}.bgBottom{z-index：5；}.wave{位置：绝对；左：0；宽度：200%；高度：100%；background-repeat：重复不重复；背景位置：0底部；transform-origin:centerbottom;}.waveTop{background-size:50%230px;}.waveAnimation.waveTop{animation:move-wave3s;-webkit-动画：移动波3s；-webkit-动画延迟：1s；animation-delay:1s;}.waveMiddle{background-size:50%230px;}.waveAnimation.waveMiddle{animation:move_wave10slinearinfinite;}.waveBottom{background-size:50%230px;}.waveAnimation.waveBottom{animation:move_wave15slinearinfinite;}附赠链接：~~~~http://sc.chinaz.com/tag_jiaoben/BoLangDongHua.htmlhttp://sc.chinaz.com/jiaoben/170901051840.htm
