<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet">
<svg class="editorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
<defs>
<path
id="gentle-wave"
d="m -160,44.4 c 30,0 58,
-18 87.7,-18 30.3,0 58.3,
18 87.3,18 30,0 58,-18 88,
-18 30,0 58,18 88,18 l 0,
34.5 -351,0 z"/>
</defs>
<g class="parallax">
<!-- fill:支持rgb可设置透明度-->
<use xlink:href="#gentle-wave" x="50" y="0" fill="#ffa07a"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#cd5c5c"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#ff6347"/>
</g>
</svg>
<div class="content">
<h1>svg动画</h1>
</div>
</body>
<style>
.parallax > use {
animation: move-forever 12s linear infinite;
transform-origin: 50% 50%;
}
.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%);
}
}
.editorial {
display: block;
width: 100%;
height: 10em;
margin: 0;
}
body {
background-color: #323232;
margin: 0;
padding: 9em 0 0 0;
}
.content {
font-family: 'Lato', sans-serif;
text-align: center;
background-color: #ff6347;
text-align: center;
min-height: 75vh;
margin: 0;
padding: 1em;
color: #eee;
font-size: 2em;
font-weight: 300;
}
.content {
font-size: 1em;
}
.content h1 {
margin-top: -1.3em;
font-weight: 100;
font-size: 5em;
user-select: none;
cursor: default;
}
@media (max-width: 50em) {
.content h1 {
font-size: 12vmax;
}
.editorial {
height: 15vw;
}
}
</style>
</html>
