中了3d的毒

凡哥

凡哥

帖子代码：

1. <style>
   
2.     .pa { margin: 20px 0 20px calc(50% - 730px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/2/3dp.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 6px; z-index: 1; position: relative; }
   
3.     #lzpa { position: absolute; left: calc(50% - 200px); top: 60px; width: 400px; height: 240px; cursor: pointer; }
   
4.     #lzpa:hover #vid { transform: scale(1.5, 1.2); }
   
5.     li-zi { position: absolute; width: 30px; height: 30px; border-radius: 0 100%; box-shadow: -1px -1px 6px rgba(255,255,255,.6); opacity: .8; offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120'); animation: move 20s linear infinite var(--state), size 20s linear infinite var(--state); }
   
6.     #vid { position: absolute; left: calc(50% - 80px); top: calc(50% - 80px); width: 160px; height: 160px; border-radius:50%; object-fit: cover; pointer-events: none; mix-blend-mode: color-dodge; transition: 2s; }
   
7.     @keyframes move { to { offset-distance: 100%; } }
   
8.     @keyframes size { 0%, 50%, 100% { transform: scale(1) rotateY(20deg); } 25% { transform: scale(0.5)  rotateY(10deg); } 75% { transform: scale(1.5)  rotateY(30deg); } }
   
9. </style>
   
10. 
    
11. <div class="pa">
    
12.     <div id="lzpa"><video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/32/5b3f6022657ac.mp4" autoplay loop muted></video></div>
    
13.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=865040132" autoplay loop></audio>
    
14. </div>
    
15. 
    
16. <script>
    
17.     var total = 12;
    
18.     for(var i = 0; i < total; i ++) {
    
19.         let lz = document.createElement('li-zi');
    
20.         lz.style.cssText += `
    
21.             animation-delay: -${20 / total * i}s;
    
22.             background-color: #${Math.random().toString(16).substring(2, 8)};
    
23.         `;
    
24.         lzpa.appendChild(lz);
    
25.     }
    
26. 
    
27.     var mState = () => {
    
28.         lzpa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
29.         aud.paused ? vid.pause() : vid.play();
    
30.     };
    
31. 
    
32.     aud.onplaying = aud.onpause = () => mState();
    
33. 
    
34.     lzpa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
35. </script>

复制代码

范闲TH

哎呦看起来不错哒 ！

范闲TH

这楼发代码帖子，影响一楼效果，不好意思，我把代码编辑掉了

范闲TH

哎呦漂亮啊！

凡哥

范闲TH 发表于 2024-5-22 11:50
哎呦漂亮啊！

蒲团楼影响了一楼的效果

范闲TH

凡哥 发表于 2024-5-22 12:38
蒲团楼影响了一楼的效果

这代码写的不错

云笛

哇塞，又一个代码高手哦，帖子真漂亮。给静图增加了灵动性

穆云寒

谢谢分享啦！视听享受。

清梦

凡哥老师新作精彩