svg标签的CSS3动画特效 - 经典特效
效果图截图：
（类似于：水波荡漾）
css代码如下：
@charset "UTF-8";svg:not(:root) {overflow: hidden;}svg {width: 100%}/*svg g path,svg path {fill: #B4B4B4;}*/.svg-box{height: 146px;margin-top: 100px;}.editorial {height: 150px; margin-top: -150px;}.editorial {display: block;width: 100%;height: 10em;max-height: 100vh;margin-top: -101px;}.parallax>use {animation: move-forever 12s linear infinite;}.parallax>use:nth-child(1) {animation-delay: -2s;}.parallax>use:nth-child(2) {animation-delay: -2s;animation-duration: 5s;}.parallax>use:nth-child(3) {animation-delay: -4s;animation-duration: 3s;}@keyframes move-forever {0% {transform: translate(-90px,0);}100% {transform: translate(85px,0);}}
html代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="svg.css"/></head><body><div class="svg-box"><svg class="editorial" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"><defs><path id="gentle-wave" d="M-160 44c30 058-18 88-18s58 18 88 1858-18 88-1858 18 88 18v44h-352z"></path></defs><g class="parallax"><use xlink:href="#gentle-wave" x="50" y="0" fill="rgba(128,215,175,.5)"></use><use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(128,215,175,.5)"></use><use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(128,215,175,.5)"></use></g></svg></div></body></html>
说明：
1. 封装就可使用，无需JS支持。2. 样式文件svg.css中，修改.svg-box高度即可修改动画高度，
以上就是关于“ svg标签的CSS3动画特效 - 经典特效 ” 的全部内容。
