论坛 › 花潮油坊 › Illusion

马黑黑 发表于 2024-10-2 11:55

Illusion

<style>
        #tz {
                margin: 30px 0 30px calc(50% - 721px);
                width: 1280px;
                height: 800px;
                background: url('https://638183.freep.cn/638183/t24/webp2/Illusion.webp') no-repeat center/cover;
                box-shadow: 0 0 6px rgba(0,0,0,.5);
                z-index: 1;
                position: relative;
        }
        #vid {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
                -webkit-mask: radial-gradient(tan, transparent 60%, transparent);
        }
        #player {
                position: absolute;
                left: calc(50% - 100px);
                bottom: 10px;
                cursor: pointer;
        }
        .rect {
                fill: none;
                stroke: url(#lGd);
                stroke-width: 6;
                stroke-dasharray: 6;
                transform-origin: 50%;
                animation-delay: 0s;
                animation: change 8s linear infinite var(--state);
        }
        .rect:nth-child(even) { animation-delay: -1s; }
        @keyframes change {
                to { transform: rotate(360deg); stroke-dashoffset: 300; }
        }
</style>

<div id="tz">
        <video id="vid" src="https://img.tukuppt.com/video_show/2419216/00/01/99/5b5030b7d3f01.mp4" autoplay loop muted></video>
        <svg id="player" width="200" height="200">
                <defs>
                        <linearGradient id="lGd" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stop-color="yellow" />
                                <stop offset="25%" stop-color="green" />
                                <stop offset="50%" stop-color="white" />
                                <stop offset="75%" stop-color="green" />
                                <stop offset="100%" stop-color="yellow" />
                        </linearGradient>
                </defs>
                <rect class="rect" x="5%" y="5%" width="90%" height="90%" rx="50%"/>
                <rect class="rect" x="20%" y="20%" width="60%" height="60%"/>
                <rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
                <rect class="rect" x="30%" y="30%" width="40%" height="40%"/>
                <rect class="rect" x="40%" y="40%" width="20%" height="20%"/>
                <rect class="rect" x="40%" y="40%" width="20%" height="20%"/>
        </svg>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1348252954" autoplay loop></audio>
</div>

<script>
mState = () => {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-10-2 11:56

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
        #tz {
                margin: 30px 0 30px calc(50% - 721px);
                width: 1280px;
                height: 800px;
                background: url('https://638183.freep.cn/638183/t24/webp2/Illusion.webp') no-repeat center/cover;
                box-shadow: 0 0 6px rgba(0,0,0,.5);
                z-index: 1;
                position: relative;
        }
        #vid {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
                -webkit-mask: radial-gradient(tan, transparent 60%, transparent);
        }
        #player {
                position: absolute;
                left: calc(50% - 100px);
                bottom: 10px;
                cursor: pointer;
        }
        .rect {
                fill: none;
                stroke: url(#lGd);
                stroke-width: 6;
                stroke-dasharray: 6;
                transform-origin: 50%;
                animation-delay: 0s;
                animation: change 8s linear infinite var(--state);
        }
        .rect:nth-child(even) { animation-delay: -1s; }
        @keyframes change {
                to { transform: rotate(360deg); stroke-dashoffset: 300; }
        }
&lt;/style&gt;

&lt;div id="tz"&gt;
        &lt;video id="vid" src="https://img.tukuppt.com/video_show/2419216/00/01/99/5b5030b7d3f01.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;svg id="player" width="200" height="200"&gt;
                &lt;defs&gt;
                        &lt;linearGradient id="lGd" x1="0" y1="0" x2="0" y2="1"&gt;
                                &lt;stop offset="0%" stop-color="yellow" /&gt;
                                &lt;stop offset="25%" stop-color="green" /&gt;
                                &lt;stop offset="50%" stop-color="white" /&gt;
                                &lt;stop offset="75%" stop-color="green" /&gt;
                                &lt;stop offset="100%" stop-color="yellow" /&gt;
                        &lt;/linearGradient&gt;
                &lt;/defs&gt;
                &lt;rect class="rect" x="5%" y="5%" width="90%" height="90%" rx="50%"/&gt;
                &lt;rect class="rect" x="20%" y="20%" width="60%" height="60%"/&gt;
                &lt;rect class="rect" x="30%" y="30%" width="40%" height="40%"/&gt;
                &lt;rect class="rect" x="30%" y="30%" width="40%" height="40%"/&gt;
                &lt;rect class="rect" x="40%" y="40%" width="20%" height="20%"/&gt;
                &lt;rect class="rect" x="40%" y="40%" width="20%" height="20%"/&gt;
        &lt;/svg&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1348252954" autoplay loop&gt;&lt;/audio&gt;
&lt;/div&gt;

&lt;script&gt;
mState = () =&gt; {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.paused ? vid.pause() : vid.play();
};
aud.onplaying = aud.onpause = () =&gt; mState();
player.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

红影 发表于 2024-10-2 12:31

想着黑黑的这个帖子应该是前面那个svg图案的具体应用，果真如此呢{:4_187:}

红影 发表于 2024-10-2 12:34

颜色重新调过了，用在帖子里有星星点点的效果，好美{:4_199:}

红影 发表于 2024-10-2 12:37

这个除了旋转都动画，还增加了stroke-dashoffset:的动画，比讲解帖子里的效果更漂亮。
而且能使用--state就达到一键暂停，太厉害了{:4_199:}

花飞飞 发表于 2024-10-2 15:38

矮油，这贴跑油坊串门来了{:4_173:}

花飞飞 发表于 2024-10-2 15:42

音乐好听，小播从技术到颜值都闪亮高级，贴子动态梦幻浪漫，完美之贴。。

梦江南 发表于 2024-10-2 17:47

问好老师，辛苦了！

马黑黑 发表于 2024-10-2 18:04

梦江南 发表于 2024-10-2 17:47
问好老师，辛苦了！

{:4_190:}

查看完整版本: Illusion