论坛 › 欢乐水吧 › 学习黑黑老师的Illusion代码，这是啥

梦江南 发表于 2024-10-3 15:45

学习黑黑老师的Illusion代码，这是啥

<style>
        #tz {
                margin: 30px 0 30px calc(50% - 721px);
                width: 1280px;
                height: 800px;
                background: url('https://pic.imgdb.cn/item/66fde4ee0a206445e36cd4b4.gif') 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: 30px;
                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>
<img src="https://pic.imgdb.cn/item/66fe34320a206445e3ac9b2e.gif" width="220px" alt="" style="position: absolute; bottom: 400px; left: 940px;opacity: .75;" />
        <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=1929612430" 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-3 15:50

看看“这是啥”{:5_106:}

梦江南 发表于 2024-10-3 16:17

起个网名好难 发表于 2024-10-3 15:50
看看“这是啥”

“这是啥”{:4_173:}

愤怒的葡萄 发表于 2024-10-3 16:27

这是啥？！

梦江南 发表于 2024-10-3 16:46

愤怒的葡萄 发表于 2024-10-3 16:27
这是啥？！

这是猫咪在问，会转的东西是啥。{:4_173:}

梦油 发表于 2024-10-3 16:54

嗬！这只猫咪的两眼真有神。

梦江南 发表于 2024-10-3 18:01

梦油 发表于 2024-10-3 16:54
嗬！这只猫咪的两眼真有神。

猫咪的两眼正在看着会转的圆转！{:4_173:}谢谢梦油老师！

愤怒的葡萄 发表于 2024-10-3 18:07

梦江南 发表于 2024-10-3 16:46
这是猫咪在问，会转的东西是啥。

原来这样的意思啊。

红影 发表于 2024-10-3 19:08

有趣，用猫咪的视角去隐喻黑黑小播的神奇，好棒{:4_187:}

红影 发表于 2024-10-3 19:10

猫咪的眼睛会眨，文字还会转动。江南的动画做得真好。{:4_199:}

红影 发表于 2024-10-3 19:10

欣赏江南好帖{:4_187:}

马黑黑 发表于 2024-10-3 19:55

猫咪开的那么认真，有趣{:4_170:}

小辣椒 发表于 2024-10-3 21:24

欣赏梦江南的精彩制作{:4_171:}

梦江南 发表于 2024-10-4 08:03

愤怒的葡萄 发表于 2024-10-3 18:07
原来这样的意思啊。

是啊。早上问好！{:4_204:}

愤怒的葡萄 发表于 2024-10-4 08:05

梦江南 发表于 2024-10-4 08:03
是啊。早上问好！

江南兄早上好，在这祝你国庆节快乐！~~~葡萄有一段时间没有怎么来论坛发帖了。

梦江南 发表于 2024-10-4 08:06

红影 发表于 2024-10-3 19:08
有趣，用猫咪的视角去隐喻黑黑小播的神奇，好棒

问好影子，不仅猫咪觉得神奇，我也感到神奇呢！{:4_204:}

梦江南 发表于 2024-10-4 08:07

红影 发表于 2024-10-3 19:10
欣赏江南好帖

谢谢影子，早上好！{:4_171:}

梦江南 发表于 2024-10-4 08:09

红影 发表于 2024-10-3 19:10
猫咪的眼睛会眨，文字还会转动。江南的动画做得真好。

主要表达黑黑老师代码的神奇。{:4_173:}

梦江南 发表于 2024-10-4 08:13

马黑黑 发表于 2024-10-3 19:55
猫咪开的那么认真，有趣

猫咪喜欢玩线球，看到老师会转的圆，它就目不转睛地想这是啥？能玩吗？{:4_173:}

梦江南 发表于 2024-10-4 08:14

小辣椒 发表于 2024-10-3 21:24
欣赏梦江南的精彩制作

问好小辣椒，谢谢支持！{:4_204:}

查看完整版本: 学习黑黑老师的Illusion代码，这是啥