梦江南 发表于 2024-10-11 12:07

【美人鱼】套用黑黑老师的逃离代码


<style>
#tz {
        margin: 30px 0px 30px calc(50% - 721px);
        width: 1280px;
        height: 700px;
        background: blue url('https://pic.imgdb.cn/item/67089fb4d29ded1a8c6700ba.png') no-repeat center/cover;
        box-shadow: 3px 3px 6px rgba(0,0,0,.6);
        position:relative;
}
#player {
        position: absolute;
        bottom: 20px;
        left: calc(50% - 50px);
        animation: rot 8s linear infinite var(--state);
}
.waves {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50%;
}
.wavegroup > use {
        animation: waving 25s cubic-bezier(.55,.5,.45,.5) infinite var(--state);
}
.wavegroup > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
}
.wavegroup > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
}
.wavegroup > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
}
.wavegroup > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 30s;
}
@keyframes waving {
        0% { transform: translate3d(-90px,0,0); }
        100% { transform: translate3d(85px,0,0); }
}
@keyframes rot {
        to { transform: rotate(360deg); filter: hue-rotate(360deg); }
}
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2629995163" autoplay loop></audio>
        <svg class="waves" viewBox="0 24 150 28" xmlns="http://www.w3.org/2000/svg">
                <defs>
                        <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
                </defs>
                <g class="wavegroup">
                        <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.4" />
                        <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.3)" />
                        <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.2)" />
                        <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255,255,255,0.1" />
                </g>
        </svg>
        <img id="player" src="https://638183.freep.cn/638183/web/svg/p2.svg" atl="" title="play" />
</div>

<script>
mState = () => {
        tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        player.title = aud.paused ? '点击播放' : '点击暂停';
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

梦江南 发表于 2024-10-11 12:09

底图不同黑黑老师的波浪形颜色也不同了。

起个网名好难 发表于 2024-10-11 13:06

https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif

梦江南 发表于 2024-10-11 14:15

起个网名好难 发表于 2024-10-11 13:06


问好老师，重阳节快乐！{:4_204:}

梦油 发表于 2024-10-11 14:15

欣赏佳作，问候梦江南。

梦江南 发表于 2024-10-11 14:17

梦油 发表于 2024-10-11 14:15
欣赏佳作，问候梦江南。

问好梦油老师，谢谢支持！{:4_204:}

愤怒的葡萄 发表于 2024-10-11 15:18

梦江南 发表于 2024-10-11 14:17
问好梦油老师，谢谢支持！

江南兄今天下午也在线啊！~~~

梦江南 发表于 2024-10-11 15:25

愤怒的葡萄 发表于 2024-10-11 15:18
江南兄今天下午也在线啊！~~~

在啊，祝您父母重阳节快乐！

愤怒的葡萄 发表于 2024-10-11 15:27

梦江南 发表于 2024-10-11 15:25
在啊，祝您父母重阳节快乐！

我也有段时间没怎么上来了，也祝江南兄重阳节快乐。

红影 发表于 2024-10-11 15:54

梦江南 发表于 2024-10-11 12:09
底图不同黑黑老师的波浪形颜色也不同了。

这是半透明颜色带来的效果啊{:4_173:}

红影 发表于 2024-10-11 15:55

这个波浪效果太美了，江南的制作真棒{:4_199:}

梦江南 发表于 2024-10-11 17:07

愤怒的葡萄 发表于 2024-10-11 15:27
我也有段时间没怎么上来了，也祝江南兄重阳节快乐。

谢谢，谢谢，祝您身体健康，开心快乐！

梦江南 发表于 2024-10-11 17:08

红影 发表于 2024-10-11 15:54
这是半透明颜色带来的效果啊

是的，黑黑老师设置是透明的代码。

梦江南 发表于 2024-10-11 17:09

红影 发表于 2024-10-11 15:55
这个波浪效果太美了，江南的制作真棒

惭愧，这是全套用黑黑老师代码的。{:4_201:}

红影 发表于 2024-10-11 17:56

梦江南 发表于 2024-10-11 17:08
是的，黑黑老师设置是透明的代码。

这里的颜色透出来特别漂亮呢{:4_187:}

红影 发表于 2024-10-11 17:57

梦江南 发表于 2024-10-11 17:09
惭愧，这是全套用黑黑老师代码的。

黑黑的代码本来就好，江南的制作也很好呢{:4_187:}

小辣椒 发表于 2024-10-12 13:38

这个水波浪效果好漂亮

{:4_199:}

小辣椒 发表于 2024-10-12 13:39

欣赏梦江南的精美制作，美人鱼运用在水波浪中，效果特别的美{:4_199:}

梦江南 发表于 2024-10-12 16:02

红影 发表于 2024-10-11 17:56
这里的颜色透出来特别漂亮呢

是底图的关系。

梦江南 发表于 2024-10-12 16:03

红影 发表于 2024-10-11 17:57
黑黑的代码本来就好，江南的制作也很好呢

我主要是选择图片。{:4_173:}
页: [1] 2
查看完整版本: 【美人鱼】套用黑黑老师的逃离代码