论坛 › 【清音倚栏】 › Lover TO：淡淡 贺高升

平凡 发表于 2024-1-4 17:01

Lover TO：淡淡 贺高升

<style>
#papa {
        margin: 150px 0 0 calc(50% - 792px);
        position: relative;
        width: 1422px;
        height: 800px;
        background: tan url('https://pic.imgdb.cn/item/65967826871b83018a38f0d3.jpg');
        background-blend-mode: difference;
        border: 3px solid rgba(0,0,200,.6);
        border-radius: 12px;
        box-shadow: 3px 3px 20px #ccc;
        overflow: hidden;
        z-index: 1;
}
#btnplay {
        position: absolute;
        top: 520px;
        left: 100px;
        width:150px;
        filter: hue-rotate(220deg) drop-shadow(0 0 2px transparent);
        cursor: pointer;
        transition: filter .35s ease-in;
        z-index: 1;
        animation: rotating 5s infinite linear var(--state);
}
#btnplay:hover {
        filter: hue-rotate(0) drop-shadow(0 0 30px white);
}
#vid {
        position: absolute;
        top: -60px;
        width: 1422px;
        height: 860px;
        object-fit: cover;
        filter: opacity(.98);
}


@keyframes rotating {
        to { transform: rotate(1turn); }
}

#tit {
      position: absolute;
      left: -50px;
      top: 630px;
      
      background-image:url('https://xlaj.cn/assets/file/zp/20240102011216.gif'); background-size:cover;
      width:650px; height:200px; font: bold 2.0em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
         border:0px #eddfdc solid; z-index: 10;
}


</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2405179/00/01/31/5b3f247c939a9.mp4" loop muted></video>
            


        <audio id="aud" src="http://music.163.com/song/media/outer/url?id=1894008435.mp3" autoplay loop></audio>

<div id="tit">Lover   TO：淡淡 贺高升</div>


        <img id="btnplay" src="https://pic.imgdb.cn/item/65967327871b83018a2bf2dd.png" alt="" title="播放/暂停" />
</div>

<script>

(function() {

let mState = () => {
        aud.paused ?
                (papa.style.setProperty('--state','paused'), vid.pause()) :
                (papa.style.setProperty('--state','running'), vid.play());
};

aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);

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

})();

</script>

蓝魔 发表于 2024-1-4 23:24

欣赏一下，谢谢。

么念 发表于 2024-1-5 10:01

平凡2024新年快乐！为什么我听不见:L
那个是淡淡，坛子里的谁叫淡淡

我跟着平凡贺淡淡高升

阳光痕迹 发表于 2024-1-5 10:16

嘿，信号差，暂时打不开

平凡 发表于 2024-1-5 14:05

么念 发表于 2024-1-5 10:01
平凡2024新年快乐！为什么我听不见
那个是淡淡，坛子里的谁叫淡淡



问好么念，新年好！
淡淡是别的论坛的朋友，听不到点击小猫

平凡 发表于 2024-1-5 14:05

阳光痕迹 发表于 2024-1-5 10:16
嘿，信号差，暂时打不开

阳光痕迹新年好，现在能够打开了

阳光痕迹 发表于 2024-1-5 14:31

平凡 发表于 2024-1-5 14:05
阳光痕迹新年好，现在能够打开了

好大的场面

明月印 发表于 2024-1-6 09:51

阳光痕迹 发表于 2024-1-5 14:31
好大的场面
你是担心 楼与舰艇撞伤歌的翅膀吧。。。:lol

阳光痕迹 发表于 2024-1-7 01:20

公子世无双 发表于 2024-1-6 09:51
你是担心 楼与舰艇撞伤歌的翅膀吧。。。

我是怕公子伤心

明月印 发表于 2024-1-7 09:02

阳光痕迹 发表于 2024-1-7 01:20
我是怕公子伤心

你真的确定公子有心吗？:lol

查看完整版本: Lover TO：淡淡 贺高升