论坛 › 欢乐水吧 › 老屋后山林

马黑黑 发表于 2024-1-1 17:38

老屋后山林

<style>
#papa {
        margin: 0 0 0 calc(50% - 624px);
        position: relative;
        width: 1080px;
        height: 718px;
        background: tan url('https://638183.freep.cn/638183/t24/webp/wuhz.webp');
        background-blend-mode: difference;
        border: 3px solid rgba(0,0,200,.6);
        border-radius: 12px;
        box-shadow: 3px 3px 20px #000;
        overflow: hidden;
        z-index: 1;
}
#btnplay {
        position: absolute;
        top: 10px;
        left: calc(50% - 100px);
        width: 200px;
        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: 1080px;
        height: 778px;
        object-fit: cover;
        filter: opacity(.25);
}
@keyframes rotating {
        to { transform: rotate(1turn); }
}
</style>

<div id="papa">
        <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f53c677460.mp4" loop muted></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1307769091" autoplay loop></audio>
        <img id="btnplay" src="https://638183.freep.cn/638183/t23/btn/uih.webp" 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-1 17:47

新年的红包？

愤怒的葡萄 发表于 2024-1-1 17:48

再领一个红包就下了，也给其它会员留点红包吧。

梦油 发表于 2024-1-1 17:49

黑黑先生新年快乐！

醉美水芙蓉 发表于 2024-1-1 17:56

醉美水芙蓉 发表于 2024-1-1 17:56

醉美水芙蓉 发表于 2024-1-1 17:57

醉美水芙蓉 发表于 2024-1-1 17:57

醉美水芙蓉 发表于 2024-1-1 18:01

千羽 发表于 2024-1-1 18:20

这个二层小楼的老屋挺漂亮的，是晚上吗，后面的山林很有些神秘感呢{:4_173:}

千羽 发表于 2024-1-1 18:22

那朵会转动的花儿播放器点击就会变色，太漂亮了{:4_203:}

樵歌 发表于 2024-1-1 18:23

后面山林有点怕怕的。{:4_173:}

千羽 发表于 2024-1-1 18:23

问好黑黑老师，祝2024年平安吉祥，好运相伴{:4_187:}

樵歌 发表于 2024-1-1 18:24

不知道有那啥的传说故事没有{:4_190:}

樵歌 发表于 2024-1-1 18:24

什么也没看到{:4_203:}

樵歌 发表于 2024-1-1 18:24

等白天再看。

樵歌 发表于 2024-1-1 18:25

不过，一到白天那啥就睡觉了{:4_173:}

马黑黑 发表于 2024-1-1 19:00

愤怒的葡萄 发表于 2024-1-1 17:47
新年的红包？

新年快乐

马黑黑 发表于 2024-1-1 19:00

愤怒的葡萄 发表于 2024-1-1 17:48
再领一个红包就下了，也给其它会员留点红包吧。

没人可以领10次

红影 发表于 2024-1-1 19:00

这场景和音乐名很相配，欣赏黑黑好帖{:4_199:}

查看完整版本: 老屋后山林