|
|
楼主 |
发表于 2024-3-8 12:36
|
显示全部楼层
帖子代码
<style>
#papa { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 800px; background: url('https://638183.freep.cn/638183/t24/1/skymirror.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#papa::before { position: absolute; content: ''; left: 270px; top: 298px; width: 685px; height: 448px; border-radius: 50%; transition: 2s; background: url('https://638183.freep.cn/638183/t24/1/skymirror.jpg') -270px -298px; box-shadow: inset 0 0 100px red; animation: flash 20s infinite alternate var(--state); }
#papa:hover::before, #papa:hover #vid { transform: scale(1.1); }
#papa > img { position: absolute; mix-blend-mode: multiply; cursor: pointer; }
#papa > img:nth-of-type(1) { top: 600px; }
#papa > img:nth-of-type(2) { top: 600px; right: 0; transform: rotateY(180deg); }
#papa > img:nth-of-type(3) { top: 500px; left: 40%; transform: rotateX(180deg); filter: opacity(.8) blur(1px); }
#vid {position: absolute; left: 270px; top: 298px; width: 685px; height: 448px; border-radius: 50%; object-fit: cover; mix-blend-mode: screen; transition: 2s; pointer-events: none; }
@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>
<div id="papa">
<!-- https://music.163.com/#/song?id=492292805 -->
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1988547254" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/93/5b4e902755687.mp4" autoplay loop muted></video>
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
<img src="https://638183.freep.cn/638183/Pic/81/bird7.gif" alt="" />
<img src="https://638183.freep.cn/638183/Pic/81/bird3.gif" alt="" />
</div>
<script>
(function() {
let mState = () => aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause())
: (papa.style.setProperty('--state', 'running'), vid.play())
;
aud.onpause = aud.onplaying = () => mState();
vid.disablePictureInPicture = true;
let pics = document.querySelectorAll('#papa > img');
pics.forEach(pic => pic.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
|
|
发表于 2024-3-8 12:35
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2024-3-8 15:20
！
