脚链

马黑黑

马黑黑

代码

1. <style>
   
2. #mydiv {
   
3.         margin: 30px;
   
4.         width: 200px;
   
5.         height: 200px;
   
6.         border: 2px dotted purple;
   
7.         border-radius: 50%;
   
8.         position: relative;
   
9.         display: grid;
   
10.         place-items: center;
    
11.         --size: 30px;
    
12.         --borderRadius: 0 50%;
    
13.         --mnColor: rgba(0,100,0,.75);
    
14. }
    
15. li-zi {
    
16.         position: absolute;
    
17.         width: var(--size);
    
18.         height: var(--size);
    
19.         border-radius: var(--borderRadius);
    
20. }
    
21. </style>
    
22. 
    
23. <div id="mydiv"></div>
    
24. 
    
25. <script>
    
26. 
    
27. let total = 15;
    
28. 
    
29. Array.from({length: total}).forEach( (item,key) => {
    
30.         let cc = '#' + Math.random().toString(16).substr(-6);
    
31.         item = document.createElement('li-zi');
    
32.         item.style.cssText += `
    
33.                 background: ${cc};
    
34.                 transform: rotate(${360 / total * key}deg) translate(100px);
    
35.                 box-shadow: inset 0 0 ${10 + Math.random() * 10}px var(--mnColor);
    
36.         `;
    
37.         mydiv.appendChild(item);
    
38. });
    
39. 
    
40. </script>

复制代码

马黑黑

修改 12 行的CSS变量 --borderRadius 值，比如 0 100%、50% 等等只要是合法的border-radius值，珠链的样式会发生变化。

脚链并非变态的奢侈品，淘宝、京东、亚马孙都有卖。我这一组，由于饰物可随意更改，价格会贵一些，拼夕夕的起步价一万米。中意者赶紧下单，手慢无。

马黑黑

珠子颜色随机，但由于定义为 inset 的 box-shadow 的作用，随机的颜色渲染出来的效果很奇妙。总体来说，一定模糊半径的内阴影完全改变了子元素背景色的外观，所以将此CSS颜色变量命名为 --mnColor，mn 是 main 的缩写。

红影

首先看到这个标题笑喷，之前有手链，现在就有脚链啊

红影

刷新了好几遍，看着它各种颜色的变化，真美啊

红影

马黑黑 发表于 2023-8-31 07:38
珠子颜色随机，但由于定义为 inset 的 box-shadow 的作用，随机的颜色渲染出来的效果很奇妙。总体来说，一 ...

也就是说 改变--mnColor的颜色，能让珠子被另外渲染的吧。

红影

马黑黑 发表于 2023-8-31 07:32
修改 12 行的CSS变量 --borderRadius 值，比如 0 100%、50% 等等只要是合法的border-radius值，珠链的样式 ...

拼夕夕，这个名好玩

马黑黑

醉美水芙蓉 发表于 2023-8-31 11:54
坐等看老师的新播放器！

这个做播放器也挺不错

马黑黑

醉美水芙蓉 发表于 2023-8-31 11:53
哪吒的风火轮来了！

马黑黑

红影 发表于 2023-8-31 09:47
首先看到这个标题笑喷，之前有手链，现在就有脚链啊

脚链和手链原理相同，加工机制有所不同

马黑黑

红影 发表于 2023-8-31 09:48
刷新了好几遍，看着它各种颜色的变化，真美啊

看着不错

马黑黑

红影 发表于 2023-8-31 09:53
也就是说 改变--mnColor的颜色，能让珠子被另外渲染的吧。

它对最终效果的影响成分很大

马黑黑

红影 发表于 2023-8-31 09:58
拼夕夕，这个名好玩

有所禁忌

红影

马黑黑 发表于 2023-8-31 12:38
脚链和手链原理相同，加工机制有所不同

嗯嗯，这个刷新几次看看真的挺好看的。

红影

马黑黑 发表于 2023-8-31 12:40
有所禁忌

知道，真灵活，弄了这么个名来

红影

马黑黑 发表于 2023-8-31 12:38
脚链和手链原理相同，加工机制有所不同

这个是用li-zi 做的，那个是直接做的。

红影

马黑黑 发表于 2023-8-31 12:39
它对最终效果的影响成分很大

是叠加后的颜色。