中了3d的毒

马黑黑

马黑黑

帖子代码：

1. <style>
   
2.     .pa { margin: 20px 0 20px calc(50% - 721px); 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>

复制代码

南无月

这个路径没有用线串起来，之前用过的那些各种花样路径是不是都可以试着用一用了

南无月

这个球状体整了一条腰带，鼠标移上去之后，变大的同时还有变形。。

南无月

这个粒子的变化是今天教程实例。。。。。

梦江南

老师又研究出了新东东，赞啦！

马黑黑

梦江南 发表于 2024-5-22 15:14
老师又研究出了新东东，赞啦！

俺以为你是要给俺拉个赞助

马黑黑

南无月 发表于 2024-5-22 13:04
这个粒子的变化是今天教程实例。。。。。

是滴

马黑黑

南无月 发表于 2024-5-22 12:59
这个球状体整了一条腰带，鼠标移上去之后，变大的同时还有变形。。

这是CSS特效

马黑黑

南无月 发表于 2024-5-22 12:56
这个路径没有用线串起来，之前用过的那些各种花样路径是不是都可以试着用一用了

都可以尝试一下

南无月

马黑黑 发表于 2024-5-22 17:33
都可以尝试一下

试了个杯子形状的，粒子个数没有设置，全部叠一起了。这个要有时间慢慢尝试，无限可能是真的。

南无月

马黑黑 发表于 2024-5-22 17:33
这是CSS特效

宽高设置不同的数据它就可以变形了那个印度美儿儿里用过。。当时试过用这个功能变瘦变高

南无月

马黑黑 发表于 2024-5-22 17:32
是滴

怪好看的，裁切的形状也好看

马黑黑

南无月 发表于 2024-5-22 17:50
怪好看的，裁切的形状也好看

这个不是裁切，是设置边框的角半径

马黑黑

南无月 发表于 2024-5-22 17:49
宽高设置不同的数据它就可以变形了那个印度美儿儿里用过。。当时试过用这个功能变瘦变高

反正多实践就会出新奇的效果

马黑黑

南无月 发表于 2024-5-22 17:48
试了个杯子形状的，粒子个数没有设置，全部叠一起了。这个要有时间慢慢尝试，无限可能是真的。

樵歌

不断创新！
问好神人

马黑黑

樵歌 发表于 2024-5-22 18:26
不断创新！
问好神人

樵歌

马黑黑 发表于 2024-5-22 18:27

去赶了集，发现黑师代码都火遍江湖了超级牛呵

马黑黑

樵歌 发表于 2024-5-22 18:33
去赶了集，发现黑师代码都火遍江湖了超级牛呵