脚链
<style>#mydiv {
margin: 30px;
width: 200px;
height: 200px;
border: 2px dotted purple;
border-radius: 50%;
position: relative;
display: grid;
place-items: center;
--size: 30px;
--borderRadius: 0 50%;
--mnColor: rgba(0,100,0,.75);
}
li-zi {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: var(--borderRadius);
}
</style>
<div id="mydiv"></div>
<script>
let total = 15;
Array.from({length: total}).forEach( (item,key) => {
let cc = '#' + Math.random().toString(16).substr(-6);
item = document.createElement('li-zi');
item.style.cssText += `
background: ${cc};
transform: rotate(${360 / total * key}deg) translate(100px);
box-shadow: inset 0 0 ${10 + Math.random() * 10}px var(--mnColor);
`;
mydiv.appendChild(item);
});
</script>
代码
<style>
#mydiv {
margin: 30px;
width: 200px;
height: 200px;
border: 2px dotted purple;
border-radius: 50%;
position: relative;
display: grid;
place-items: center;
--size: 30px;
--borderRadius: 0 50%;
--mnColor: rgba(0,100,0,.75);
}
li-zi {
position: absolute;
width: var(--size);
height: var(--size);
border-radius: var(--borderRadius);
}
</style>
<div id="mydiv"></div>
<script>
let total = 15;
Array.from({length: total}).forEach( (item,key) => {
let cc = '#' + Math.random().toString(16).substr(-6);
item = document.createElement('li-zi');
item.style.cssText += `
background: ${cc};
transform: rotate(${360 / total * key}deg) translate(100px);
box-shadow: inset 0 0 ${10 + Math.random() * 10}px var(--mnColor);
`;
mydiv.appendChild(item);
});
</script>
本帖最后由 马黑黑 于 2023-8-31 07:34 编辑
修改 12 行的CSS变量 --borderRadius 值，比如 0 100%、50% 等等只要是合法的border-radius值，珠链的样式会发生变化。
脚链并非变态的奢侈品，淘宝、京东、亚马孙都有卖。我这一组，由于饰物可随意更改，价格会贵一些，拼夕夕的起步价一万米。中意者赶紧下单，手慢无。 珠子颜色随机，但由于定义为 inset 的 box-shadow 的作用，随机的颜色渲染出来的效果很奇妙。总体来说，一定模糊半径的内阴影完全改变了子元素背景色的外观，所以将此CSS颜色变量命名为 --mnColor，mn 是 main 的缩写。 首先看到这个标题笑喷，之前有手链，现在就有脚链啊{:4_173:} 刷新了好几遍，看着它各种颜色的变化，真美啊{:4_199:} 马黑黑 发表于 2023-8-31 07:38
珠子颜色随机，但由于定义为 inset 的 box-shadow 的作用，随机的颜色渲染出来的效果很奇妙。总体来说，一 ...
也就是说 改变--mnColor的颜色，能让珠子被另外渲染的吧。 马黑黑 发表于 2023-8-31 07:32
修改 12 行的CSS变量 --borderRadius 值，比如 0 100%、50% 等等只要是合法的border-radius值，珠链的样式 ...
拼夕夕，这个名好玩{:4_173:} 醉美水芙蓉 发表于 2023-8-31 11:54
坐等看老师的新播放器！
这个做播放器也挺不错 醉美水芙蓉 发表于 2023-8-31 11:53
哪吒的风火轮来了！
{:4_172:} 红影 发表于 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
有所禁忌
知道，真灵活，弄了这么个名来{:4_173:} 马黑黑 发表于 2023-8-31 12:38
脚链和手链原理相同，加工机制有所不同
这个是用li-zi 做的，那个是直接做的。 马黑黑 发表于 2023-8-31 12:39
它对最终效果的影响成分很大
是叠加后的颜色。