论坛 › 『唯美音画』 › 贝加尔湖畔

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

贝加尔湖畔

本帖最后由 福宝 于 2024-6-28 12:43 编辑 <br /><br /><style>
#tz {margin: 30px 0; left: 50%; transform: translateX(calc(-50% - 90px)); width: 1700px; height: 640px; overflow: hidden; background: lightblue url('https://gd-hbimg.huaban.com/73eedd0bb54bdfd745e3569208d5c7f9f9d14712301639-K4t6A0_fw1200') no-repeat center/cover; border: 10px inset tan; z-index: 1; position: relative; --distance: 1900px; }

#tz::before{ position: absolute; content: ''; right: 320px; top: 80px; width: 100%; height: 130%; overflow: hidden; transform-origin: calc(100% - 130px) 70px; background: repeating-conic-gradient(at calc(100% - 130px) 70px, hsla(0,0%,100%,.2) 0 2deg,transparent 0 25deg); animation: opa 5s linear infinite var(--state), rot1 16s infinite var(--state); }
@keyframes rot1 { to { transform: rotate(45deg); } }
@keyframes rot2 { from { transform: rotate(-15deg) scale(1); } to { transform: rotate(180deg) scale(1.3); } }
@keyframes opa { from { opacity: 0; } to { opacity: .55; } }

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

c-c {
    position: absolute;
    content:url('https://gd-hbimg.huaban.com/2c68170651c50b004f50a6559bd02a761f1a9db5303df-xA7xtW');
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    mix-blend-mode:normal;
   /*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); }
}
#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); }
}


</style>

<div id="tz">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2021178359" 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-28 22:43

这光彩效果蛮好

查看完整版本: 贝加尔湖畔