梦从

马黑黑

樵歌

手捧宝莲花，这是神女三圣母么

马黑黑

樵歌 发表于 2024-1-17 11:44
手捧宝莲花，这是神女三圣母么

刷新一下，神女手中的花可以散出去：刚才有个拼写问题，刚改好

马黑黑

帖子代码

1. <style>
   
2.     #papa { margin: -70px 0 0 calc(50% - 721px); width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/jpg/mgjk.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; overflow: hidden; z-index: 1; }
   
3.     #player { position: absolute; left: 670px; top: 280px; mix-blend-mode: screen; cursor: pointer; transition: filter 1s; animation: rot 6s infinite linear var(--state); }
   
4.     #player:hover { filter: hue-rotate(160deg); }
   
5.     li-zi { position: absolute; left: 760px; top: 340px; width: 60px; height: 60px; opacity: .3; background: url('https://638183.freep.cn/638183/t23/btn/hxbj.png') no-repeat center/cover; }
   
6.     @keyframes moving { from { opacity: .3; transform: translate(0,0) rotate(0); } to { opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(3turn); } }
   
7.     @keyframes rot { to { transform: rotate(360deg); } }
   
8. </style>
   
9. 
   
10. <div id="papa">
    
11.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1908287251" autoplay loop></audio>
    
12.     <img id="player" src="https://638183.freep.cn/638183/t23/btn/hxbj.png" alt="" />
    
13. </div>
    
14. 
    
15. <script>
    
16. (function() {
    
17.     let all = 30;
    
18.     for(let i = 0; i < all; i++) {
    
19.         let lz = document.createElement('li-zi');
    
20.         let hudu = Math.PI / 180 * 360 / all * i;
    
21.         let xx = 950 * Math.cos(hudu), yy = 850 * Math.sin(hudu);
    
22.         lz.style.cssText += `
    
23.             --x0: ${xx}px;
    
24.             --y0: ${yy}px;
    
25.             filter: hue-rotate(${Math.floor(Math.random() * 360)}deg);
    
26.             animation: moving ${Math.random() * 20 + 20}s ${1 - Math.random() * 20}s infinite var(--state);
    
27.         `;
    
28.         papa.prepend(lz);
    
29.     }
    
30.     let mState = () => aud.paused ? papa.style.setProperty('--state','paused') : papa.style.setProperty('--state','running');
    
31.     aud.addEventListener('playing',mState,false);
    
32.     aud.addEventListener('pause',mState,false);
    
33.     player.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
    
34. })();
    
35. </script>

复制代码

樵歌

马黑黑 发表于 2024-1-17 11:45
刷新一下，神女手中的花可以散出去：刚才有个拼写问题，刚改好

看到了很漂亮，三圣女本天上的仙女，她散的花儿落头上，要行好运

樵歌

神话色彩特别浓郁。旁边的小动物也很可爱的。

马黑黑

樵歌 发表于 2024-1-17 12:39
神话色彩特别浓郁。旁边的小动物也很可爱的。

动物也是有寓意的：两边的动物，暗示着什么，看怎么解读

马黑黑

樵歌 发表于 2024-1-17 12:37
看到了很漂亮，三圣女本天上的仙女，她散的花儿落头上，要行好运

花之运基本上

樵歌

马黑黑 发表于 2024-1-17 12:58
动物也是有寓意的：两边的动物，暗示着什么，看怎么解读

我就看到有鹿子、松鼠、狐狸，猫头鹰等，不知道啥寓意

樵歌

马黑黑 发表于 2024-1-17 12:59
花之运基本上

幸亏俺躲得及时

梦油

那几只小生灵设计得恰到好处。

红影

好美的制作。按钮的花儿鼠标接触会变色，散出去的花儿也都色相变化着

马黑黑

红影 发表于 2024-1-17 17:01
好美的制作。按钮的花儿鼠标接触会变色，散出去的花儿也都色相变化着

有所差异

马黑黑

梦油 发表于 2024-1-17 16:55
那几只小生灵设计得恰到好处。

不多不少正合适

马黑黑

樵歌 发表于 2024-1-17 15:48
幸亏俺躲得及时

哎呀，躲错了，花砸人比瓜砸人安全的

马黑黑

樵歌 发表于 2024-1-17 15:47
我就看到有鹿子、松鼠、狐狸，猫头鹰等，不知道啥寓意

也没啥，觉得好看就行

红影

马黑黑 发表于 2024-1-17 17:54
有所差异

是的，散出去的是变化的，鼠标粗碰的是固定的。
这个我应该可以也跟着做个的呢

马黑黑

红影 发表于 2024-1-17 19:06
是的，散出去的是变化的，鼠标粗碰的是固定的。
这个我应该可以也跟着做个的呢

嗯，可以边做变领会，它是简单的

马黑黑

醉美水芙蓉 发表于 2024-1-17 19:03
欣赏黑黑老师新作品！