绿叶清舟 发表于 2024-8-5 20:15

只为降个温


<style>
#mydiv {
        margin: 130px 0 30px calc(50% - 733px);
        width: 1280px;
        height: 780px;
        background: url('https://p.upyun.com/demo/tmp/KzDxCOus.webp') no-repeat center/cover;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        overflow: hidden;
        position: relative;
}
#mydiv:hover #player { opacity: .8; }
#mydiv::before {
        position: absolute;
        content: '';
        inset: -360px;
        background: radial-gradient(circle, transparent, rgba(60,0,120,.35), transparent) center / 30% 30%;
        transform: rotate(0deg);
        animation: bgsize 8s infinite alternate var(--state);
mix-blend-mode: multiply;
}
#player {
        position: absolute;
width: 150px;
        height: 150px;
        left: calc(50% - 75px);
        top: 150px;
        mix-blend-mode: darken;
        transition: 1s;
        opacity: 0;
        cursor: pointer;
}
@keyframes bgsize {
        to { transform: rotate(360deg); background-size: 50% 50%; }
}
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29809711" autoplay loop></audio>
        <img id="player" src="https://img1.baidu.com/it/u=2651280950,504728832&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=449" alt="" title="播放/暂停" />
</div>

<script>
//自然之声
aud.oncanplay = aud.onplaying = aud.onpause = () => mydiv.style.setProperty('--state', ['running', 'paused'][+aud.paused]);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

红影 发表于 2024-8-5 20:51

这是到北极去砍冰么，哈哈，有冰了肯定凉快{:4_173:}

红影 发表于 2024-8-5 20:53

这个很有创意，跟着清舟一起凉快一下{:4_187:}

梦江南 发表于 2024-8-6 08:52

原来斧头是播放器，赞！{:4_187:}

梦油 发表于 2024-8-6 09:02

目的达到了，我感到一丝凉气。

小九 发表于 2024-8-6 18:27

这是挖冰战暑{:4_189:}
页: [1]
查看完整版本: 只为降个温