福宝 发表于 2024-6-27 22:15

DaveZ - Here For The Rush

<style>
#tz {
    --width: 1200px;
    margin: 30px 0 30px calc(50% - (var(--width) / 2 + 1px));
    width: var(--width);
    height: 750px;
    background: url('https://gd-hbimg.huaban.com/36de9ef344328a50b074d9737a0c58d466a7d3cf45e28c-XoSCTV_fw1200') no-repeat center/cover;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
    overflow: hidden;
    position: relative;
}


#tz::after{
        position: absolute;
        content: '';
        width: 406px;
        height: 600px;
        background: url('https://gd-hbimg.huaban.com/b10e2421bd458b577070787a9e90365578a642361787c7-cKvsn0') no-repeat center/cover;
        pointer-events: auto;
        cursor: pointer;
        transform-origin: 50% 100%;
        animation: dance 2.2s var(--delay) infinite alternate linear var(--state);
}

#tz::after{
        left: calc(50% - 72px);
        bottom: 0px;
        --delay: .25s;
}

@keyframes dance {
        from { transform: skewX(-2deg); } to {transform: skewX(2deg); }
}

#player {
    position: absolute;
    display: grid;
    place-items: center;
    left: 20%;
    top: 45%;
    width: var(--ww);
    height: var(--ww);
    background: url('https://gd-hbimg.huaban.com/fc3525fda2ed2ed8ea8fadbca4bdf26e5963a4191a41f1-uhkBwF_fw1200') no-repeat 50%/60%;
    mix-blend-mode: screen;   
    border-radius: 50%;
    cursor: pointer;
    transition: .7s;
    animation: rot 6s linear infinite var(--state);
    --ww: 230px;
    --size: 80px;
}
#player:hover {filter: hue-rotate(30deg);box-shadow:inset 0 0 160px cyan;}




c-c {
    position: absolute;
    content:url('https://gd-hbimg.huaban.com/fc3525fda2ed2ed8ea8fadbca4bdf26e5963a4191a41f1-uhkBwF_fw1200');
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    mix-blend-mode: screen;
   /*background: linear-gradient(blue, cyan);*/
    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=41633311" 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);',
});
window.onresize = () => tz.style.setProperty('--distance', tz.offsetWidth + 'px');
</script>

墨羽 发表于 2024-6-28 09:36

好大的宝石！

福宝 发表于 2024-6-28 10:54

墨羽 发表于 2024-6-28 09:36
好大的宝石！
我改小了比例

蜻蜓 发表于 2024-6-28 22:47

我看着像时光隧道
页: [1]
查看完整版本: DaveZ - Here For The Rush