版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35393869/article/details/82255388
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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
<defs>
<path id="gentle-wave" d="M-160 44c30 0
58-18 88-18s
58 18 88 18
58-18 88-18
58 18 88 18
v44h-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动画特效 - 经典特效 ” 的全部内容。