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

晶莹剔透的手链送给鱼儿

<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>

马黑黑 发表于 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>

马黑黑 发表于 2022-4-11 12:30

原本，对珠子的修饰还有个内阴影，我叫丫头过来帮看看，丫头说内阴影虽然能使珠子显得高贵，但同时对珠子的晶莹度有一定损害，还是不要的好。

马黑黑 发表于 2022-4-11 12:32

串珠子的手链绳其实没有，但可以有。现在的珠子设计成彼此紧挨着，就可以不要绳子了。如果珠子个数少一些，那么可以设值父元素的border属性来模拟绳子。

马黑黑 发表于 2022-4-11 12:33

希望 @鱼儿 喜欢

加林森 发表于 2022-4-11 12:43

本帖最后由 加林森 于 2022-4-11 12:59 编辑 <br /><br />真漂亮。制作得真好。帮喊：@鱼儿 {:4_195:}

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1477291165&auto=1&height=32"></iframe>

马黑黑 发表于 2022-4-11 12:55

加林森 发表于 2022-4-11 12:43
真漂亮。制作得真好。帮喊：@鱼儿

{:4_190:}

加林森 发表于 2022-4-11 12:56

马黑黑 发表于 2022-4-11 12:55


{:4_191:}

红芍药 发表于 2022-4-11 13:06

漂酿{:4_199:}{:4_199:}

鱼儿 发表于 2022-4-11 13:29

谢谢马小黑{:4_190:}

梦油 发表于 2022-4-11 14:15

黑黑朋友下午好！有黑黑这样的名师，一定能够出高徒。

马黑黑 发表于 2022-4-11 14:15

鱼儿 发表于 2022-4-11 13:29
谢谢马小黑

叫错辈分了{:4_170:}

马黑黑 发表于 2022-4-11 14:16

梦油 发表于 2022-4-11 14:15
黑黑朋友下午好！有黑黑这样的名师，一定能够出高徒。

{:4_190:}

马黑黑 发表于 2022-4-11 14:16

红芍药 发表于 2022-4-11 13:06
漂酿

邻好

鱼儿 发表于 2022-4-11 14:44

马黑黑 发表于 2022-4-11 14:15
叫错辈分了

老黑{:4_172:}

樵歌 发表于 2022-4-11 15:34

我乍一评分珠子就变红线线了{:4_203:}

樵歌 发表于 2022-4-11 15:36

哈哈，刷一下又变回来了，

红影 发表于 2022-4-11 15:43

真漂亮，粒粒晶莹闪烁，太美了{:4_199:}

红影 发表于 2022-4-11 16:02

本来不太理解为什么除以5，纸上画一下，16个珠子，平分周长，珠子长度正好是5多一点点，若去计算，是5.093

马黑黑 发表于 2022-4-11 17:51

红影 发表于 2022-4-11 16:02
本来不太理解为什么除以5，纸上画一下，16个珠子，平分周长，珠子长度正好是5多一点点，若去计算，是5.093

嗯，不必那么精准，珠子会挤在一起的
页: [1] 2 3
查看完整版本: 晶莹剔透的手链送给鱼儿