晶莹剔透的手链送给鱼儿

马黑黑 · 发表于 2022-4-11 12:26

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2022-4-11 12:27

代码及部分解释：

<style type="text/css">
/* 手链绳:导轨 */
.outer {
--len: 240px;
margin: 50px auto 0;
display: flex;
justify-content: center;
align-items: center;
width: var(--len);
height: var(--len);
position: relative;
border-radius: 50%;
border: 1px solid red;
}
/* 珠子 */
.outer div {
position: absolute;
width: calc(var(--len) / 5);
height: calc(var(--len) / 5);
border-radius: 50%;
}
/* 珠子:抛光 */
.outer div::before {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
background: radial-gradient(at 35% 40%, rgba(255,255,255,.5), rgba(0,0,255,.1));
}
</style>
<div class="outer"></div>
<script language="javascript">
let outer = document.querySelector(".outer");
let width = outer.clientWidth;
let total = 16;//珠子总数
let angle = 360 / total;//步进角度
let str = "";//珠子HTML代码字串
/* 珠子布局规律
① rotate angle*j 度) ② translateY -width/2 像素 ③ rotate 360deg-angle*j 度（保持原本站姿）
*/
for(j=0; j<total; j++) {
let transform = `rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
let cc = `linear-gradient(120deg,#${Math.random().toString(16).substr(-6)},#${Math.random().toString(16).substr(-6)})`;
str += `<div style="transform: ${transform}; background: ${cc};"></div>\n`;
}
outer.innerHTML = str;
</script>