论坛 › 『唯美音画』 › 画卷 静水流深

福宝 发表于 2024-6-24 11:37

画卷 静水流深

本帖最后由 福宝 于 2024-6-24 12:38 编辑 <br /><br /><style>

.tz {
        --ox: 81px;
        --lrc-top: 20px;
        --lrc-shadow: #333;
        --lrc-bg: radial-gradient(cyan,lightgreen,white) 50%/90px 60px;
        --state: running;
        position: relative;
        left: 50%;
        transform: translateX(calc(-50% - var(--ox)));
        width: 1024px;
        height: 640px;
        background-color: lightblue;
        overflow: hidden;
        z-index: 1;
        box-shadow: 2px 2px 3px gray;
        border-radius: 1px solid red;
}

.tz::before, .tz::after {
        content: '';
        position: absolute;
}

.tz::before {
        content: attr(data-lrc);
        top: var(--lrc-top);
        width: 100%;
        height: 60px;
        font: bold 32px/60px sans-serif;
        color: transparent;
        background: var(--lrc-bg);
        background-clip: text;
        -webkit-background-clip: text;
        filter: drop-shadow(1px 1px 1px var(--lrc-shadow));
        text-align: center;
}

.player {
        --size: 80px;
        position: absolute;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        cursor: pointer;
        transition: 1s;
        animation: rot 6s linear infinite var(--state);
}

.player:hover {
        width: calc(var(--size) + 10px);
        height: calc(var(--size) + 10px);
}

.vid {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: screen;
        pointer-events: none;
}

@keyframes rot {
        to {
                transform: rotate(360deg);
        }
}


    #tz {
--ox: 90px;
--lrc-top:580px;
--lrc-bg: radial-gradient(cyan, white, orange) center/120px 60px;
display: grid;
place-items: center;
user-select: none;
overflow: hidden;
width: 1080px; height: 655px;
background: url('https://gd-hbimg.huaban.com/44e7ae340a87ba2ee44bc8152ddee95f412158e866d98-6W6wpO') no-repeat center/cover;
margin: 30px 0;z-index: 1;position: relative; }

    #player { position: absolute; left:400px;top:580px; width: 45px; height: 45px; border-radius: 50%; border: thick groove; border-color: cyan orange yellow green; display: grid; place-items: center; transition: .8s; --opt: 1;z-index: 5; }
#player::before, #player::after { position: absolute; content: '';width: 20px; height: 20px; background: orange; transition: .3s; cursor: pointer; }
    #player::before { clip-path: polygon(0 0, 0 100%, 100% 50%); opacity: calc(var(--opt) * 1); background: cyan; }
    #player::after { mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); -webkit-mask: linear-gradient(to right, red 30%, transparent 30%, transparent 70%, red 70%, red 0); opacity: calc(1 - var(--opt)); }

    #player:hover { transform: scale(1.1); filter: invert(.3) drop-shadow(0 0 20px black);filter: hue-rotate(180deg) drop-shadow(0 0 4px yellow); }
    .vid { position: absolute;
height: calc(110% + 120px);
transform: rotateX(0deg);
filter: hue-rotate(360deg);opacity:.75;
object-fit: cover;
        mix-blend-mode: screen;}

    .vid:hover { filter: hue-rotate(180deg); opacity:.95; }
    .lrc{position: absolute; left:450px;top:580px;z-index: 5;}
</style>

<div id="tz" class="tz" data-lrc="静水深流">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=304901" autoplay loop></audio>
    <video id="vid" class="vid" src="https://st0.dancf.com/gaoding/gaoding/cdeade6d-177e-4dce-b5c9-b5dbb0e7c2e353097305.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video>
    <div id="player"></div>
</div>

<script>
var mState = () => {
    player.style.setProperty('--opt', +aud.paused);
    player.title = ['暂停','播放'][+aud.paused];
    aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

福宝 发表于 2024-6-24 11:39

请在极速模式下欣赏。不支持兼容模式

蜻蜓 发表于 2024-6-24 17:32

很是清凉的感觉{:10_402:}

瞳萤 发表于 2024-6-24 19:01

手机也可以看的动画，挺美的

悦儿 发表于 2024-6-24 19:48

瞳萤 发表于 2024-6-24 19:01
手机也可以看的动画，挺美的

适合好奇心杀死猫玩的朋友玩

瞳萤 发表于 2024-6-24 19:50

悦儿 发表于 2024-6-24 19:48
适合好奇心杀死猫玩的朋友玩

哈哈，我现在啥好奇心都木有了

悦儿 发表于 2024-6-25 11:56

瞳萤 发表于 2024-6-24 19:50
哈哈，我现在啥好奇心都木有了

{:9001:}基本都躺平了

查看完整版本: 画卷 静水流深