svg实现波浪滚动效果

最新推荐文章于 2024-04-14 09:35:01 发布

菜方方

最新推荐文章于 2024-04-14 09:35:01 发布

阅读量709

点赞数

分类专栏： htmlDemo 文章标签： html 前端

原文链接：https://www.jq22.com/code352

版权

htmlDemo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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