直接看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
body{ background:#00A680;font-family: "华文楷体";text-align: center;color: #fff;}
h1{margin: 250px 0px 0px 0px ;font-size: 50px;}
p{font-size: 25px;}
svg:not(:root){overflow:hidden}
.editorial{position:absolute;right:0;bottom:0;left:0;display:block;width:100%;height:10em;}
.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);}}
</style>
</head>
<body>
<h1>代码的世界你不懂。</h1>
<p>杨少锋</p>
<svg 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>
<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>
</body>
</html>
川公网安备 51010702003150号
留下您的脚步
最近评论