新春（二）

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); position: relative; width: 1024px; height: 640px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/jpg/iuyi.jpg') no-repeat center/cover; box-shadow: 2px 2px 12px #000; }
   
3. .vid { position: absolute; top: -100px; width: 1024px; height: 500px; object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
   
4. .vid:nth-of-type(2) { transform: scale(1,-1); top: 400px; opacity: .56; }
   
5. .vid:nth-of-type(3) { top: 60px; width: 1124px; height: 700px; }
   
6. .player { position: absolute; left: -100px; width: 100px; cursor: pointer; animation: move 80s linear infinite var(--state); }
   
7. .player:nth-of-type(1) { top: 20px; }
   
8. .player:nth-of-type(2) { transform: scale(1,-1); bottom: 20px; opacity: .5; }
   
9. @keyframes move { to { left: 1024px; } }
   
10. </style>
    
11. 
    
12. <div id="papa">
    
13.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1805837542" autoplay loop></audio>
    
14.         <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca4afd33e2.mp4" loop muted></video>
    
15.         <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca4afd33e2.mp4" loop muted></video>
    
16.         <video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/01/91/5b4d7c5becb5a.mp4" loop muted></video>
    
17.         <img class="player" alt="" src="https://638183.freep.cn/638183/small/kite.png" />
    
18.         <img class="player" alt="" src="https://638183.freep.cn/638183/small/kite.png" />
    
19. </div>
    
20. 
    
21. <script>
    
22. var vids = document.querySelectorAll('.vid'), players = document.querySelectorAll('.player');
    
23. var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
    
24. var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vidplay(false)) : (papa.style.setProperty('--state', 'running'),vidplay(true));
    
25. aud.addEventListener('pause', mState);
    
26. aud.addEventListener('playing',mState);
    
27. players.forEach(player => player.onclick = () => aud.paused ? aud.play() : aud.pause());
    
28. </script>

复制代码

姚云裳

效果真不错，新春开心快乐

马黑黑

姚云裳 发表于 2024-2-10 13:25
效果真不错，新春开心快乐

梦油

黑黑先生过年好！

亦是金

真好看！黑黑老师新春快乐！

红影

哇，太热闹了。欣赏黑黑好帖，太赞了

红影

火树银花，流光溢彩，这样才是春节的样子

马黑黑

红影 发表于 2024-2-10 14:35
火树银花，流光溢彩，这样才是春节的样子

初一是大庆典

马黑黑

梦油 发表于 2024-2-10 13:59
黑黑先生过年好！

过年好！

马黑黑

亦是金 发表于 2024-2-10 14:27
真好看！黑黑老师新春快乐！

同乐同乐

马黑黑

红影 发表于 2024-2-10 14:34
哇，太热闹了。欣赏黑黑好帖，太赞了

领完红包预示着十全十美

梦油

马黑黑 发表于 2024-2-10 16:05
过年好！

我们一起欢欢乐乐过大年。

樵歌

比央妈春晚还好看！，

樵歌

先生新年好

樵歌

收藏起来，以后做贺帖背景。

樵歌

火树银花不夜天，一杯一杯接着干。且把此图当仙境，入驻其中不复还。