疏影

马黑黑

马黑黑

代码

1. <style>
   
2. #papa { margin: 0 0 0 calc(50% - 593px); position: relative; padding: 0; box-sizing: content-box; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/1/20u.jpg') no-repeat center/cover; box-shadow: 2px 4px 8px black; border: 10px groove lightblue; overflow: hidden; z-index: 1; }
   
3. #papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/gif/goldfish.gif'); left: 20%; top: 70%; mix-blend-mode: multiply; }
   
4. #papa::after { transform: translate(-100px,0) scale(-1,1); }
   
5. #player, #pclone { margin: 20px auto; position: relative; width: 150px; height: 150px; animation: rot 6s linear infinite var(--state); cursor: pointer; }
   
6. #pclone { filter: blur(1px) opacity(.5); }
   
7. ye-zi { position: absolute; left: calc(50% - 0.5 * var(--ww)); top: 0; width: var(--ww); height: 75px; border-radius: 100%; background: radial-gradient(green, deeppink, green); transform-origin: 50% 100%; transform: rotate(var(--deg)); }
   
8. @keyframes rot { to { transform: rotate(-360deg); } }
   
9. </style>
   
10. 
    
11. <div id="papa">
    
12.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5267406" autoplay loop></audio>
    
13.         <div id="player"></div>
    
14.         <div id="pclone"></div>
    
15. </div>
    
16. 
    
17. <script>
    
18. var all = 5;
    
19. Array.from({length: all}).forEach((item,key) => {
    
20.         item = document.createElement('ye-zi');
    
21.         item.style.cssText += `--ww: 20px; --deg: ${360 / all * key}deg;`;
    
22.         player.appendChild(item);
    
23. });
    
24. pclone.innerHTML = player.innerHTML;
    
25. var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' :'running');
    
26. aud.addEventListener('playing', mState);
    
27. aud.addEventListener('pause', mState);
    
28. player.onclick = pclone.onclick = () => aud.paused ? aud.play() : aud.pause();
    
29. </script>

复制代码

马黑黑

播放器控制按钮大致上按这个思路实现：
这个叶瓣效果也很美 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

不同的是，背景渐变使用径向渐变替代线性渐变。

模拟倒影的叶瓣效果使用了另一个div，将播放器的 innerHTML 复制一份。

金鱼使用一对 #papa 选择器的伪元素做成，content 属性直接用 url 函数加载图片，::after 左右倒置一下并往左偏移。

樵歌

这位小仙女在想，送介么美的花花，要不要俺小女子以身相许呢

樵歌

一角那四尾金鱼在不断喝水，好有趣

红影

马黑黑 发表于 2024-2-16 08:35
播放器控制按钮大致上按这个思路实现：
这个叶瓣效果也很美 - 马黑黑教程专版 - 花潮论坛 - Powered by Di ...

“模拟倒影的叶瓣效果使用了另一个div，将播放器的 innerHTML 复制一份。”
这句指的pclone.innerHTML = player.innerHTML;吧，因为player.appendChild(item);也需要赋予pclone

这个#pclone { filter: blur(1px) opacity(.5); } 没看懂，只有虚化和透明度的设置，没拉开距离啊，怎么分出的上下？

红影

这里的环境好美，又是适合修炼的地方呢

朵拉

漂亮，学习下~~

马黑黑

朵拉 发表于 2024-2-16 10:34
漂亮，学习下~~

马黑黑

樵歌 发表于 2024-2-16 09:43
这位小仙女在想，送介么美的花花，要不要俺小女子以身相许呢

你想多了

马黑黑

樵歌 发表于 2024-2-16 09:45
一角那四尾金鱼在不断喝水，好有趣

说不定人家是在开会

马黑黑

红影 发表于 2024-2-16 10:13
这里的环境好美，又是适合修炼的地方呢

修炼到家了就不会这么想了

马黑黑

红影 发表于 2024-2-16 10:12
“模拟倒影的叶瓣效果使用了另一个div，将播放器的 innerHTML 复制一份。”
这句指的pclone.innerHTML = ...

这两个div使用相对定位，position: relative; ，这样的定位，元素按文档流占用实际空间，div 元素属于 block（块状）结构，不会水平并排，而是垂直排列（当然，特定布局可以改变这些特性）；两个元素都用 margin: 20px auto; ，外边距属性设为20，居中。故而得到帖子中它们呈现出来的位置关系。

小辣椒

黑黑~~这个花瓣效果有加了滤镜吗？小辣椒发现滤镜效果调节颜色有点难度，自己想要的有时候调不出来

小辣椒

欣赏黑黑的新科技产品，赞的~

马黑黑

小辣椒 发表于 2024-2-16 12:34
欣赏黑黑的新科技产品，赞的~

马黑黑

小辣椒 发表于 2024-2-16 12:34
黑黑~~这个花瓣效果有加了滤镜吗？小辣椒发现滤镜效果调节颜色有点难度，自己想要的有时候调不出来

这个叶瓣效果，没有使用滤镜，是用了背景渐变做出来的。金鱼用了混合技术，和滤镜差不多，但是不是滤镜属性，而是 mix-blend-mode 属性，融合或混合。

小辣椒

马黑黑 发表于 2024-2-16 13:07
这个叶瓣效果，没有使用滤镜，是用了背景渐变做出来的。金鱼用了混合技术，和滤镜差不多，但是不是滤镜属 ...

这些知识点小辣椒都没有学习过的，所以做作业会花时间，要弄懂就要一个个问度娘。。。。除非直接套用

樵歌

马黑黑 发表于 2024-2-16 11:16
你想多了

俺 是说她在想画她的呢

樵歌

马黑黑 发表于 2024-2-16 11:17
说不定人家是在开会

不，是在吵架或骂大街嘞