论坛 › 欢乐水吧 › 你的太阳（马黑黑原创）

朵拉 发表于 2024-8-14 20:06

你的太阳（马黑黑原创）

<style>
#mydiv {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 576px;
        background: tan;
        box-shadow: 3px 3px 8px gray;
        overflow: hidden;
        position: relative;
}
#mydiv::before {
        position:absolute;
        content: '';
        inset: 0;
        background: url('https://pic.imgdb.cn/item/66bc916cd9c307b7e9c3625e.jpg') no-repeat center/cover;
        -webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);
        transition: .72s;
        --size: 3px;
}
#mydiv:hover::before { --size: 32px; transform: scale(115%) rotate(2deg); }
#player {
        --inset: gray;
        position: absolute;
        left: calc(90% - 60px);
        top: 20px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: url('https://pic.imgdb.cn/item/66bc91fad9c307b7e9c3d07e.png') no-repeat center/cover;
        mix-blend-mode: multiply;
        box-shadow: inset 0 0 30px var(--inset);
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
#player:hover { --inset: plum; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2156114389
        " autoplay loop></audio>
        <div id="player" title="播放/暂停"></div>
</div>

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

朵拉 发表于 2024-8-14 20:08

@马黑黑
老师 晚上好，学生交作业，请指正哈{:4_190:}
注：播放器是2024年巴黎奥运会的吉祥物——弗里热

马黑黑 发表于 2024-8-14 20:23

朵拉 发表于 2024-8-14 20:08
@马黑黑
老师 晚上好，学生交作业，请指正哈
注：播放器是2024年巴黎奥运会的吉祥物——弗里热

{:4_199:}

红影 发表于 2024-8-14 22:03

这制作有意思。欣赏朵宝好帖{:4_187:}

梦油 发表于 2024-8-15 09:23

国乒三剑客天下无敌。

茉莉 发表于 2024-8-15 18:50

好可爱，好有创意，向朵拉学习

查看完整版本: 你的太阳（马黑黑原创）