CSS3+SVG 多条波浪叠加动画效果 - 踏得网

Multiple Waves Background

CSS3, SVG, wave

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3948
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="hero">
    <svg width="210px" height="242px" viewBox="0 0 210 242" class="logo">
        <g fill="none">
            <g id="Desktop-Landscape" transform="translate(-537.000000, -234.000000)">
                <g id="Logo" transform="translate(542.000000, 240.000000)">
                    <polygon id="Polygon" stroke="#FFFFFF" stroke-width="10" points="100 0 199.592921 57.5 199.592921 172.5 100 230 0.407078565 172.5 0.407078565 57.5"></polygon>
                    <path d="M42.4314575,171.568542 C73.6734008,202.810486 124.326599,202.810486 155.568542,171.568542 C186.810486,140.326599 186.810486,89.6734008 155.568542,58.4314575 L148.497475,65.5025253 C175.834175,92.8392257 175.834175,137.160774 148.497475,164.497475 C121.160774,191.834175 76.8392257,191.834175 49.5025253,164.497475 C22.1658249,137.160774 22.1658249,92.8392257 49.5025253,65.5025253 L42.4314575,58.4314575 C11.1895142,89.6734008 11.1895142,140.326599 42.4314575,171.568542 Z"
                    id="Oval" fill="#FFFFFF"></path>
                    <path d="M60.109127,178.890873 C81.5879631,200.369709 116.412037,200.369709 137.890873,178.890873 C159.369709,157.412037 159.369709,122.587963 137.890873,101.109127 L130.819805,108.180195 C148.393398,125.753788 148.393398,154.246212 130.819805,171.819805 C113.246212,189.393398 84.753788,189.393398 67.1801948,171.819805 C49.6066017,154.246212 49.6066017,125.753788 67.1801948,108.180195 L60.109127,101.109127 C38.630291,122.587963 38.630291,157.412037 60.109127,178.890873 Z"
                    id="Oval" fill="#FFFFFF"></path>
                    <path d="M78.1421356,185.568542 C83.8017128,191.22812 91.3487318,194.312821 99.1935625,194.354905 C107.149643,194.397586 114.828973,191.308112 120.568542,185.568542 C132.284271,173.852814 132.284271,154.857864 120.568542,143.142136 L113.497475,150.213203 C121.307961,158.023689 121.307961,170.686989 113.497475,178.497475 C109.665906,182.329043 104.559146,184.383545 99.2472072,184.355049 C94.009919,184.326953 88.9914968,182.275768 85.2132034,178.497475 C77.4027176,170.686989 77.4027176,158.023689 85.2132034,150.213203 L78.1421356,143.142136 C66.4264069,154.857864 66.4264069,173.852814 78.1421356,185.568542 Z"
                    id="Oval" fill="#FFFFFF"></path>
                </g>
            </g>
        </g>
    </svg>
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" class="wave">
        <path>
            <animate attributeName="d" values="M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100;    M0,60 A50,50 0 0,1 50,50 A50,50 0 0,0 100,50 L100,100 L0,100;    M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100" dur="10s" repeatCount="indefinite"
            rotate="auto"></animate>
        </path>
        <path>
            <animate attributeName="d" values="M0,50 A50,150 0 0,0 40,50 A50,100 0 0,1 100,50 L100,100 L0,100; M0,30 A50,300 0 0,0 40,50 A50,150 0 0,1 100,50 L100,100 L0,100; M0,50 A50,150 0 0,0 40,50 A50,100 0 0,1 100,50 L100,100 L0,100" dur="15s" repeatCount="indefinite"
            rotate="auto"></animate>
        </path>
    </svg>
</div>