手链制作讲解

马黑黑 · 发表于 2022-4-11 14:07

请马上登录，朋友们都在花潮里等着你哦：）

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

x

本帖最后由马黑黑于 2022-4-11 14:23 编辑

手链，其实就是N个珠子串在手链绳上。手链绳可以是一个设置为圆形的CSS盒子上的border，这个应该可以理解，不多说。我的设想是，珠子的圆心与父盒子的圆心一致，然后以此为基点，以固定半径+一定角度让珠子“发散”开来。定位珠子方式不止一个，我采用flex弹性布局来实现，省去操纵珠子的left与top定位。下面是父盒子的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 gold;

}

变量 --len 为了方便修改手链大小而设定。margin的设置是为了让手链不上顶格。flex布局需要用到 justify-content和align-items两个属性，它们是子元素绝对居中的保证。其他的还有定位与边框设置，容易理解。

N多的珠子会存在诸多的统一样式，所以专门设定以节省代码开销：

/* 珠子共同属性 */

.outer div {

position: absolute;

width: calc(var(--len) / 5);

height: calc(var(--len) / 5);

border-radius: 50%;

}

定位是必须的。珠子的宽高为绳子盒子相应尺寸的1/5，也可以是别的尺寸。边框形状设为圆形。

珠子还要抛光才显得高贵，用个伪元素的发散渐变背景来实现：

/* 珠子:抛光 */

.outer div::before {

content: '';

position: absolute;

width: inherit;

height: inherit;

border-radius: 50%;

background: radial-gradient(at 35% 40%, rgba(255,255,255,.6), rgba(0,0,255,.1));

}

一般来说，抛光点放在正中也可以，但从光学原理角度考虑，应偏左上一点吧，这样对立体感的增强也更明显（我们的手链其实是2d的）。

下来就是各个珠子的具体形态与基于圆心的偏移了。用CSS做N多个珠子很费劲，作为演示，在这里我只做一个，让它通过动画来模拟所有其它珠子所在的位置，当然它不能脱离轨道，所以需要给它一个半径，这个半径通用于所有的珠子，旋转角度则各不相同。下面是珠子独自属性与动画代码：

/* 珠子个性 */

.outer div:nth-child(1) {

background: black;

animation: rot 6s linear infinite;

}

/* 珠子运动方式 */

@keyframes rot {

from { transform: rotate(0deg) translate(calc(var(--len) / 2)) rotate(360deg); }

to { transform: rotate(360deg) translate(calc(var(--len) / 2)) rotate(0deg); }

}

解释一下动画：珠子初始形态是旋转0deg、平移父元素的高宽尺寸的一半（这是所有珠子的固定半径）、翻转360deg（保持站姿）；终结状态：旋转360deg、保持半径、翻转0deg（保持站姿）。珠子在这两个状态之间来回变化，达成的目的就是做圆环运动，过程中始终保持着站立的姿势。

画手链是不需要这个动画的，但这个动画所经历的路线是其余珠子所在的位置，如前已述，这是在这里设计这个动画的原因。

各个珠子的位置分布依托于第一个rotate的角度和以半径单位进行平移（XY平移都可以），这最好用JS来完成，JS可以设定珠子数量、计算珠子rotate的角度和保持姿势而翻转回来的角度等等，珠子就用JS来批量生成，详情请查阅本文开头所给链接的帖子，那里提供有JS代码说明。

根据上述设计，HTML代码应如下，效果与完整代码查看后面的回复：

</div>

马黑黑 · 发表于 2022-4-11 14:07

马黑黑 · 发表于 2022-4-11 14:09

二楼效果的完整代码：

<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 gold;
}
/* 珠子 */
.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,.6), rgba(0,0,255,.1));
}