技术思绪摘录旅行笔记
利用SVG简单实现波浪效果,SVG强大是强大,这个语言几乎没有可读性,脑壳青痛,不信你们自己看。


直接看代码

<!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>

CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

站点统计

总文章数:275 总分类数:18 总评论数:88 总浏览数:124.79万

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫