福宝 发表于 2024-6-27 17:23

烛火

本帖最后由 福宝 于 2024-6-27 17:25 编辑 <br /><br /><style>
#tz {
    --width: 1200px;
    margin: 30px 0 30px calc(50% - (var(--width) / 2 + 1px));
    width: var(--width);
    height: 1000px;
    background: url('https://gd-hbimg.huaban.com/296d523c10266ff28a848b5597c7acc7057e07f0c7e79-XvZpDS_fw1200') no-repeat center/cover;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
    overflow: hidden;
    position: relative;
}
#player {
    position: absolute;
    display: grid;
    place-items: center;
    left: 75%;
    top: 52%;
    width: var(--ww);
    height: var(--ww);
    background: url('https://gd-hbimg.huaban.com/fc3525fda2ed2ed8ea8fadbca4bdf26e5963a4191a41f1-uhkBwF_fw1200') no-repeat 50%/60%;
    border-radius: 50%;
    cursor: pointer;
    transition: .7s;
    animation: rot 6s linear infinite var(--state);
    --ww: 200px;
    --size: 50px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: linear-gradient(red, yellow);
    box-shadow: 0 0 6px rgba(0, 0, 0, .1);
    animation: flyout 2s forwards;
}
#vid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(100% + 60px);
    object-fit: cover;
    mix-blend-mode: overlay;
    pointer-events: none;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
    to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
    from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
    to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
    to { transform: rotate(360deg); }
}
</style>

<div id="tz">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1415706303" autoplay loop></audio>
    <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/29/96/5fa09f4e88257.mp4" muted autoplay loop></video>
    <div id="player" title="暂停"></div>
</div>

<script>
var ccs = [];
new Array(total = 12).fill(0).map((c,k) => {
    c = document.createElement('c-c');
    c.style.cssText += `--deg: ${360 / total * k}deg`;
    player.appendChild(c);
    ccs.push(c);
});

var mState = () => {
    player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    player.title = ['暂停','播放'][+aud.paused];
    ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
    aud.paused ? vid.pause() : vid.play();
};

aud.oncanplay = aud.onplaying = aud.onpause = () => mState();

player.onclick = () => aud.paused ? aud.play() : aud.pause();

var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
    papa: '#tz',
    css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: rgba(0,128,0,.5);',
});
</script>

墨羽 发表于 2024-6-27 17:31

进入魔法世界了。

福宝 发表于 2024-6-27 17:33

墨羽 发表于 2024-6-27 17:31
进入魔法世界了。

问好大佬
页: [1]
查看完整版本: 烛火