国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁(yè)
  2. >Toy博客

若隱若現(xiàn)的芯片

2年前作者：timi先生分類：Toy博客閱讀(8)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了若隱若現(xiàn)的芯片。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

先看效果：
若隱若現(xiàn)的芯片,CSS,javascript,javascript,開發(fā)語(yǔ)言,ecmascript
再看代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-519073.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>若隱若現(xiàn)的芯片</title>
    <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
    <style>
        body {
            background-color: #000000;
            overflow: hidden;
            text-align:center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        svg {
            width: 100%;
            height: 100%;
            visibility: hidden;

        }

        .ell, #ai {
            fill: none;
        }
    </style>
</head>
<body>
<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
    <defs>

        <linearGradient id="aiGrad" x1="513.98" y1="290" x2="479.72" y2="320" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#000" stop-opacity="0" />
            <stop offset=".15" stop-color="#EF476F" />
            <stop offset=".4" stop-color="#359eee" />
            <stop offset=".6" stop-color="#03cea4" />
            <stop offset=".78" stop-color="#FFC43D" />
            <stop offset="1" stop-color="#000" stop-opacity="0" />
        </linearGradient>

    </defs>

    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <ellipse class="ell" cx="400" cy="300" rx="80" ry="80" />
    <path id="ai" opacity=0.85 d="m417.17,323.85h-34.34c-3.69,0-6.67-2.99-6.67-6.67v-34.34c0-3.69,2.99-6.67,6.67-6.67h34.34c3.69,0,6.67,2.99,6.67,6.67v34.34c0,3.69-2.99,6.67-6.67,6.67Zm-5.25-12.92v-21.85c0-.55-.45-1-1-1h-21.85c-.55,0-1,.45-1,1v21.85c0,.55.45,1,1,1h21.85c.55,0,1-.45,1-1Zm23.08-16.29h-11.15m-47.69,0h-11.15m70,10.73h-11.15m-47.69,0h-11.15m40.37,29.63v-11.15m0-47.69v-11.15m-10.73,70v-11.15m0-47.69v-11.15" stroke="url(#aiGrad)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
</svg>
</body>
<script>
    gsap.config({trialWarn: false});
    let select = s => document.querySelector(s),
        toArray = s => gsap.utils.toArray(s),
        mainSVG = select('#mainSVG'),
        allEll = toArray('.ell'),
        colorArr = ['#359EEE', '#FFC43D','#EF476F','#03CEA4']

    let colorInterp = gsap.utils.interpolate(colorArr);

    gsap.set(mainSVG, {
        visibility: 'visible'
    })

    function animate (el, count) {
        let tl = gsap.timeline({
            defaults: {
                ease: 'sine.inOut'
            },
            repeat: -1
        });
        gsap.set(el, {
            opacity:1- count/(allEll.length),
            stroke: colorInterp(count/(allEll.length))
        })

        tl.to(el, {
            attr: {
                ry: `-=${count*2.3}`,
                rx: `+=${count*1.4}`
            },
            ease: 'sine.in'
        })
            .to(el, {
                attr: {
                    ry: `+=${count*2.3}`,
                    rx: `-=${count*1.4}`
                },
                ease: 'sine'
            })
            .to(el, {
                duration: 1,
                rotation: -180,
                transformOrigin: '50% 50%'
            }, 0).timeScale(0.5)
    }
    allEll.forEach((c, i) => {
        gsap.delayedCall(i/(allEll.length-1), animate, [c, i+1])
    })
    gsap.to('#aiGrad', {
        duration: 4,
        delay: 0.75,
        attr: {
            x1: '-=300',
            x2: '-=300'
        },
        scale: 1.2,
        transformOrigin: '50% 50%',
        repeat: -1,
        ease: 'none'
    })
    gsap.to('#ai', {
        duration: 1,
        scale: 1.1,
        transformOrigin: '50% 50%',
        repeat: -1,
        yoyo: true,
        ease: 'sine.inOut'
    })

</script>
</html>

到了這里，關(guān)于若隱若現(xiàn)的芯片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包