<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>css+svg实现波浪图</title>
<link rel=FaviconIcon href=favicon.ico type=image/x-icon>
<meta name=viewport content="width=device-width,initial-scale=1">
<style type="text/css">
body{
background: linear-gradient(180deg,#3b5998 20%,#9575cd) fixed!important;
}
.editorial {
display: block;
width: 100%;
height: 10em;
margin-top: -10em;
position: fixed;
bottom: 0;
z-index: -1
}
.parallax>use {
animation: move-forever 12s linear infinite
}
.parallax>use:first-child {
animation-delay: -5s;
animation-duration: 12s
}
.parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 8s
}
.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 5s
}
@keyframes move-forever {
0% {
transform: translate(-90px)
}
to {
transform: translate(85px)
}
}
</style>
</head>
<body class=hold-transition>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" class="editorial"><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 xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="0" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="3" fill="rgba(255,255,255,.05)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gentle-wave" x="50" y="6" fill="rgba(255,255,255,.05)"></use></g></svg>
</body>
</html>
