论坛 › 音乐沙龙 › 末日来袭（学习黑黑Illusion代码）

红影 发表于 2024-10-6 22:59

末日来袭（学习黑黑Illusion代码）

<style>
        #tz {
                margin: 30px 0 30px calc(50% - 721px);
                width: 1280px;
                height: 743px;
                background: url('https://pic.imgdb.cn/item/67029916d29ded1a8c57fc3c.jpg') no-repeat center/cover;
                box-shadow: 0 0 6px rgba(0,0,0,.5);
                z-index: 1; perspective: 1200px;
                position: relative;
        }
        #vid {
                position: absolute;
                width: 100%;
                height: 100%; left: 30px;
                object-fit: cover;
                -webkit-mask: radial-gradient(tan, transparent 60%, transparent);
        }
        #pic {
                position: absolute;
                top: 20px;
                right: 360px;
                }
        #player {
                position: absolute;
                left: calc(50% - 180px);
                bottom: -60px;
                cursor: pointer;
                transform: rotateX(56deg);
        }
        .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 {
       
       from { transform: rotateX(56deg) rotate(0deg); stroke-dashoffset: 0; }
        to { transform: rotateX(56deg) rotate(360deg); stroke-dashoffset: 300; }
        }
</style>

<div id="tz">
        <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/18/34/5ee7214253353_10s_big.mp4" autoplay loop muted></video>
        <svg id="player" width="420" height="420">
                <defs>
                        <linearGradient id="lGd" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stop-color="DeepPink" />
                                <stop offset="25%" stop-color="cyan" />
                                <stop offset="50%" stop-color="white" />
                                <stop offset="75%" stop-color="cyan" />
                                <stop offset="100%" stop-color="DeepPink" />
                        </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=2005383844" autoplay loop></audio>
        <img id="pic"src="https://pic.imgdb.cn/item/6702a21dd29ded1a8c6163b4.gif" />
</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-6 23:00

胡闹一下，正好找到这张带点点的图图，挺适合黑黑这个效果的{:4_173:}

红影 发表于 2024-10-6 23:02

空中和地上神秘图案想呼应，人们无处可逃。没用火星色，自己乱配的颜色@马黑黑 {:4_173:}

红影 发表于 2024-10-6 23:05

这个放大倒是很方便的，因为用的百分比吗，只要修改宽高就好，比其他使用数字的方便{:4_187:}

马黑黑 发表于 2024-10-7 07:55

危机四伏，恐怖如斯

梦江南 发表于 2024-10-7 09:50

是世界末日吗？{:4_173:}

梦油 发表于 2024-10-7 10:02

“末日来袭”，听着挺恐怖，但看着你这播放器确挺开心。哈哈哈……

红影 发表于 2024-10-7 12:09

马黑黑 发表于 2024-10-7 07:55
危机四伏，恐怖如斯

哈哈，做着好玩的{:4_173:}

红影 发表于 2024-10-7 12:09

梦江南 发表于 2024-10-7 09:50
是世界末日吗？

假装是，吓人不{:4_173:}

红影 发表于 2024-10-7 12:10

梦油 发表于 2024-10-7 10:02
“末日来袭”，听着挺恐怖，但看着你这播放器确挺开心。哈哈哈……

是黑黑的播放器，我套用着玩呢{:4_173:}

马黑黑 发表于 2024-10-7 12:34

红影 发表于 2024-10-7 12:09
哈哈，做着好玩的

{:4_203:}

红影 发表于 2024-10-7 12:51

马黑黑 发表于 2024-10-7 12:34


这个小播很奇妙，我就有意用到奇特的场景里了{:4_173:}

马黑黑 发表于 2024-10-7 13:43

红影 发表于 2024-10-7 12:51
这个小播很奇妙，我就有意用到奇特的场景里了

挺有创意的

梦油 发表于 2024-10-7 14:05

红影 发表于 2024-10-7 12:10
是黑黑的播放器，我套用着玩呢

搭配得好，引人入胜。

梦江南 发表于 2024-10-7 14:19

看到了播放器的多种颜色组成。厉害！

绿叶清舟 发表于 2024-10-7 20:14

这是有地奸啊{:4_189:}

朵拉 发表于 2024-10-7 20:50

这是好莱坞大片么，精彩{:4_204:}

红影 发表于 2024-10-7 23:28

马黑黑 发表于 2024-10-7 13:43
挺有创意的

是黑黑的小播有创意{:4_187:}

红影 发表于 2024-10-7 23:28

梦油 发表于 2024-10-7 14:05
搭配得好，引人入胜。

假装地球被入侵了{:4_173:}

红影 发表于 2024-10-7 23:29

梦江南 发表于 2024-10-7 14:19
看到了播放器的多种颜色组成。厉害！

其实只改了2个颜色，放大了点小播{:4_173:}

查看完整版本: 末日来袭（学习黑黑Illusion代码）