HTML5 GSAP星光隐现的彩虹花刷 - 踏得网

Paint The Rainbow, 给屏幕刷上彩虹图案。

html5, svg, rainbow

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    whole = select('.whole'),
    rollerGroup = select('.rollerGroup'),
    rainbowPaths = selectAll('.rainbowLines path'),
    allStars = selectAll('.starGroup path'),
    allStaticRainbows = selectAll('.staticRainbow')
    //rainbowLines2 = select('.rainbowLines2'),
    //rainbowLines3 = select('.rainbowLines3')

TweenMax.set('svg', {
    visibility: 'visible'
})

TweenMax.staggerTo(allStaticRainbows, 0, {
    cycle: {
        alpha: [0.8, 0.6, 0.4, 0.2].reverse() //,
            //scale:[0.8,0.6,0.4, 0.2].reverse()
    },
    transformOrigin: '50% 100%'
}, 0)

TweenMax.set(allStars, {
    transformOrigin: '50% 50%'
})

var mainTl = new TimelineMax({
    delay: 0,
    repeat: -1
})

.to(rollerGroup, 1, {
        rotation: 180,
        svgOrigin: '400 410.5',
        ease: Sine.easeInOut
    })
    .staggerFrom(nodeListToArray(rainbowPaths).reverse(), 1, {
        drawSVG: '-1% -1%',
        ease: Sine.easeInOut
    }, 0.0005, '-=1')
    .staggerFrom(rainbowPaths, 1, {
        rotation: 0,
        svgOrigin: '400 410',
        ease: Elastic.easeOut.config(1, 0.7)
    }, 0, '-=1')

.staggerTo(allStars, 1, {
        cycle: {
            alpha: [0.92, 0.9, 0.5, 0.2]

},
        repeat: 1,
        yoyo: true,
        ease: Power3.easeIn
    }, 0, '-=1')
    .staggerTo(allStars, 2, {
        cycle: {
            rotation: function() {
                return (Math.random() * 1400) - 700
            }
        },
        ease: Linear.easeNone
    }, 0, '-=2')
    .to(rollerGroup, 1, {
        rotation: 0,
        svgOrigin: '475 410.5',
        x: -300,
        transformOrigin: '50% 50%',
        ease: Sine.easeInOut
    }, '-=1')
    .to(['.allRainbows', '.starGroup'], 1, {
        x: 150,
        ease: Sine.easeInOut
    }, '-=2')
    .staggerTo('.rainbow', 1, {
        alpha: '-=0.2',
        transformOrigin: '50% 100%',
        ease: Sine.easeInOut
    }, 0, '-=2')

function nodeListToArray(list) {

return Array.prototype.slice.call(list);
}

mainTl.timeScale(1)

//ScrubGSAPTimeline(mainTl);

编译

CSS

HTML

<svg class="rainbowSVG" viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg">
    <defs>
        <g id="rainbowLines" class="rainbowLines">
            <path d="M215,410c0-102.17,82.83-185,185-185s185,82.83,185,185" fill="none" stroke="#EC55B0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M201,410c0-109.9,89.1-199,199-199s199,89.1,199,199" fill="none" stroke="#AA57FC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M187,410c0-117.64,95.36-213,213-213s213,95.36,213,213" fill="none" stroke="#78BCFE" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M173,410c0-125.37,101.63-227,227-227S627,284.63,627,410" fill="none" stroke="#8DF26F" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M159,410c0-133.1,107.9-241,241-241S641,276.9,641,410" fill="none" stroke="#FFF868" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M145,410c0-140.83,114.17-255,255-255S655,269.17,655,410" fill="none" stroke="#F6B77D" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />

<path d="M131,410c0-148.56,120.44-269,269-269S669,261.44,669,410" fill="none" stroke="#ED4A70" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
        </g>
        <g id="rainbowLinesStatic" class="XrainbowLines">
            <path d="M215,410c0-102.17,82.83-185,185-185s185,82.83,185,185" fill="none" stroke="#EC55B0" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M201,410c0-109.9,89.1-199,199-199s199,89.1,199,199" fill="none" stroke="#AA57FC" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M187,410c0-117.64,95.36-213,213-213s213,95.36,213,213" fill="none" stroke="#78BCFE" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M173,410c0-125.37,101.63-227,227-227S627,284.63,627,410" fill="none" stroke="#8DF26F" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M159,410c0-133.1,107.9-241,241-241S641,276.9,641,410" fill="none" stroke="#FFF868" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
            <path d="M145,410c0-140.83,114.17-255,255-255S655,269.17,655,410" fill="none" stroke="#F6B77D" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />

<path d="M131,410c0-148.56,120.44-269,269-269S669,261.44,669,410" fill="none" stroke="#ED4A70" stroke-linecap="round" stroke-miterlimit="10" stroke-width="14.5" />
        </g>
    </defs>
    <g class="whole">

<g class="allRainbows">
            <use xlink:href="#rainbowLinesStatic" x="600" class="rainbow staticRainbow" />
            <use xlink:href="#rainbowLinesStatic" x="450" class="rainbow staticRainbow" />
            <use xlink:href="#rainbowLinesStatic" x="300" class="rainbow staticRainbow" />
            <use xlink:href="#rainbowLinesStatic" x="150" class="rainbow staticRainbow" />
            <use xlink:href="#rainbowLines" class="rainbow" />

<g class="rollerGroup" opacity="1">
                <g class="rollerHead">
                    <g>
                        <path d="M137.27,415.68V421h-5.8a8,8,0,0,1-8-8v-4.83a8,8,0,0,1,8-8h5.8Z" fill="#EC55B0" />
                        <polygon points="137.27 400.17 137.27 415.68 137.27 421 151.47 421 151.47 415.68 151.47 400.17 137.27 400.17" fill="#F6B77D" />
                        <polygon points="151.47 400.17 151.47 415.68 151.47 421 165.66 421 165.66 415.68 165.66 400.17 151.47 400.17" fill="#FFF868" />
                        <polygon points="165.66 400.17 165.66 415.68 165.66 421 179.86 421 179.86 415.68 179.86 400.17 165.66 400.17" fill="#8DF26F" />
                        <polygon points="179.86 400.17 179.86 415.68 179.86 421 194.06 421 194.06 415.68 194.06 400.17 179.86 400.17" fill="#78BCFE" />
                        <polygon points="194.06 400.17 194.06 415.68 194.06 421 208.26 421 208.26 415.68 208.26 400.17 194.06 400.17" fill="#AA57FC" />
                        <path d="M208.26,415.68V400.17h6.59a8,8,0,0,1,8,8V413a8,8,0,0,1-8,8h-6.59Z" fill="#EC55B0" />
                    </g>
                    <path d="M214.76,406.86H130.37a1.18,1.18,0,1,1,0-2.37h84.39a1.18,1.18,0,1,1,0,2.37Z" fill="#fff" />
                    <path d="M214.85,398.59H131.47a9.59,9.59,0,0,0-9.58,9.57V413a9.59,9.59,0,0,0,9.58,9.58h83.38a9.59,9.59,0,0,0,9.58-9.58v-4.83A9.59,9.59,0,0,0,214.85,398.59Zm-62.59,3.15h12.62v17.68H152.26Zm-1.58,17.68H138.06V401.75h12.62Zm15.77-17.68h12.62v17.68H166.45Zm14.2,0h12.62v17.68H180.65Zm14.2,0h12.62v17.68H194.85ZM125,413v-4.83a6.43,6.43,0,0,1,6.42-6.42h5v17.68h-5A6.43,6.43,0,0,1,125,413Zm96.23,0a6.43,6.43,0,0,1-6.42,6.42H209V401.75h5.8a6.43,6.43,0,0,1,6.42,6.42Z"
                    fill="#212121" />
                </g>
                <g>
                    <rect x="166.65" y="438.61" width="13.01" height="31.94" rx="6.51" ry="6.51" transform="translate(346.32 909.16) rotate(-180)" fill="#fff" />
                    <path d="M123.27,411s-12.62-.39-12.62,8.68c0,9.6,8.68,9.07,11.83,9.07h41.41a9.59,9.59,0,0,1,9.07,9.86" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.15" />
                    <path d="M171,470.55h0c-2.66,0-4.84-2.93-4.84-6.51V445.12c0-3.58,2.18-6.51,4.84-6.51h0Z" fill="#D3D8D5" />
                    <rect x="166.65" y="438.61" width="13.01" height="31.94" rx="6.51" ry="6.51" transform="translate(346.32 909.16) rotate(-180)" fill="none" stroke="#212121" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.15" />
                </g>
            </g>
        </g>
        <g class="starGroup" fill="#FFF">
            <path d="M362.91,154C372,153.6,374.4,151,374,141.91,374.4,151,377,153.4,386.09,153,377,153.4,374.6,156,375,165.09,374.6,156,372,153.6,362.91,154Z" opacity="0" />
            <path d="M308.14,251c1.07-8.25-.86-10.75-9.11-11.82,8.25,1.07,10.75-.86,11.82-9.11-1.07,8.25.86,10.75,9.11,11.82C311.72,240.79,309.21,242.72,308.14,251Z" opacity="0" />
            <path d="M190.55,248.75c1-6.51-.53-8.52-7-9.49,6.51,1,8.52-.53,9.49-7-1,6.51.53,8.52,7,9.49C193.53,240.74,191.52,242.24,190.55,248.75Z" opacity="0" />
            <path d="M623.94,378.42c-2-8.23-4.81-9.9-13-7.85,8.23-2,9.9-4.81,7.85-13,2,8.23,4.81,9.9,13,7.85C623.56,367.42,621.9,370.18,623.94,378.42Z" opacity="0" />
            <path d="M165.37,324.91c-1.48-9-4.29-11-13.28-9.54,9-1.48,11-4.29,9.54-13.28,1.48,9,4.29,11,13.28,9.54C165.92,313.1,163.9,315.92,165.37,324.91Z" opacity="0" />
            <path d="M619.14,285c3.61-12.18,1.31-16.43-10.87-20,12.18,3.61,16.43,1.31,20-10.87-3.61,12.18-1.31,16.43,10.87,20C627,270.52,622.76,272.82,619.14,285Z" opacity="0" />
            <path d="M442.89,188.68c4.95,6.86,8.13,7.38,15,2.43-6.86,4.95-7.38,8.13-2.43,15-4.95-6.86-8.13-7.38-15-2.43C447.32,198.72,447.84,195.54,442.89,188.68Z" opacity="0" />
            <path d="M535.29,287.68c5,1,6.59,0,7.64-5-1,5,0,6.59,5,7.64-5-1-6.59,0-7.64,5C541.33,290.35,540.27,288.73,535.29,287.68Z" opacity="0" />
            <path d="M203.79,354.69c6.87,6.94,10.58,7,17.52.1-6.94,6.87-7,10.58-.1,17.52-6.87-6.94-10.58-7-17.52-.1C210.63,365.35,210.65,361.63,203.79,354.69Z" opacity="0" />
            <path d="M536.67,185.09c1.38,8.82,4.12,10.83,12.95,9.45-8.82,1.38-10.83,4.12-9.45,12.95-1.38-8.82-4.12-10.83-12.95-9.45C536,196.66,538,193.91,536.67,185.09Z" opacity="0" />
        </g>

</g>
</svg>

<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script><script src='/uploads/161001/ScrubGSAPTimeline_debug.js'></script><script src='/uploads/150501/DrawSVGPlugin.js?r=12'></script>