非常开心 发表于 2024-1-2 14:34

新年财神到

本帖最后由 非常开心 于 2024-1-2 16:39 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2031783">

<style>
#papa {
        margin: 10px 0 0 calc(50% - 712px);
        position: relative;
        width: 1222px;
        height: 700px;
        background: tan url('https://pic.quanjing.com/m5/tv/QJ6560734987.jpg@%21350h');
        background-blend-mode: difference;
        border: 3px solid rgba(0,0,100,.6);
        border-radius: 20px;
        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: 1222px;
        height: 800px;
        object-fit: cover;
        filter: opacity(.78);
}


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

#tit {
      position: absolute;
      left: 350px;
      top: 530px;
      
      background-image:url('https://xlaj.cn/assets/file/zp/20240102011216.gif'); background-size:cover;
      width:650px; height:300px; 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/2402760/00/02/19/5b51c6d83b867.mp4" loop muted></video>
            


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

<div id="tit">祝：东篱雅苑的朋友们新年快乐</div>


        <img id="btnplay" src="http://bohann.net/data/attachment/forum/202401/02/122311jn57qv5nqu75ri29.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>
</td></tr></table>

小破孩 发表于 2024-1-2 14:49

感觉还有点立体感的啊

楚心兰 发表于 2024-1-2 14:50

视听享受哦！谢谢开心！

瞳萤 发表于 2024-1-2 23:00

新年快乐啊，非常开心{:9001:}

missile 发表于 2024-1-3 11:26

这个有点高大上了啊。

缱绻 发表于 2024-1-3 12:28

中国娃娃的新年歌曲还是很经典的

愤怒の葡萄 发表于 2024-1-4 07:34

祝坛友新年快乐！~~~

声声慢 发表于 2024-1-4 12:41

喜气洋洋

声声慢 发表于 2024-1-4 12:42

有空我也学这个 开心第一
页: [1]
查看完整版本: 新年财神到