手链制作讲解
本帖最后由 马黑黑 于 2022-4-11 14:23 编辑 <br /><br /><p>手链的效果在这里：<a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=58588&extra=page%3D1">晶莹剔透的手链送给鱼儿</a><br><br></p><p>手链，其实就是N个珠子串在手链绳上。手链绳可以是一个设置为圆形的CSS盒子上的border，这个应该可以理解，不多说。我的设想是，珠子的圆心与父盒子的圆心一致，然后以此为基点，以固定半径+一定角度让珠子“发散”开来。定位珠子方式不止一个，我采用flex弹性布局来实现，省去操纵珠子的left与top定位。下面是父盒子的CSS代码，它同时充当手链绳：</p><p><br></p><p>/* 手链绳:导轨 */</p><p>.outer {</p><p><span style="white-space:pre"> </span>--len: 240px;</p><p><span style="white-space:pre"> </span>margin: 50px auto 0;</p><p><span style="white-space:pre"> </span>display: flex;</p><p><span style="white-space:pre"> </span>justify-content: center;</p><p><span style="white-space:pre"> </span>align-items: center;</p><p><span style="white-space:pre"> </span>width: var(--len);</p><p><span style="white-space:pre"> </span>height: var(--len);</p><p><span style="white-space:pre"> </span>position: relative;</p><p><span style="white-space:pre"> </span>border-radius: 50%;</p><p><span style="white-space:pre"> </span>border: 1px solid gold;</p><p>}</p><p><br></p><p>变量 --len 为了方便修改手链大小而设定。margin的设置是为了让手链不上顶格。flex布局需要用到 justify-content和align-items两个属性，它们是子元素绝对居中的保证。其他的还有定位与边框设置，容易理解。</p><p><br></p><p>N多的珠子会存在诸多的统一样式，所以专门设定以节省代码开销：</p><p><br></p><p>/* 珠子共同属性 */</p><p>.outer div { </p><p><span style="white-space:pre"> </span>position: absolute;</p><p><span style="white-space:pre"> </span>width: calc(var(--len) / 5);</p><p><span style="white-space:pre"> </span>height: calc(var(--len) / 5);</p><p><span style="white-space:pre"> </span>border-radius: 50%;</p><p>}</p><p><br></p><p>定位是必须的。珠子的宽高为绳子盒子相应尺寸的1/5，也可以是别的尺寸。边框形状设为圆形。</p><p><br></p><p>珠子还要抛光才显得高贵，用个伪元素的发散渐变背景来实现：</p><p><br></p><p>/* 珠子:抛光 */</p><p>.outer div::before { </p><p><span style="white-space:pre"> </span>content: '';</p><p><span style="white-space:pre"> </span>position: absolute;</p><p><span style="white-space:pre"> </span>width: inherit;</p><p><span style="white-space:pre"> </span>height: inherit;</p><p><span style="white-space:pre"> </span>border-radius: 50%;</p><p><span style="white-space:pre"> </span>background: radial-gradient(at 35% 40%, rgba(255,255,255,.6), rgba(0,0,255,.1));</p><p>}</p><p><br></p><p>一般来说，抛光点放在正中也可以，但从光学原理角度考虑，应偏左上一点吧，这样对立体感的增强也更明显（我们的手链其实是2d的）。</p><p><br></p><p>下来就是各个珠子的具体形态与基于圆心的偏移了。用CSS做N多个珠子很费劲，作为演示，在这里我只做一个，让它通过动画来模拟所有其它珠子所在的位置，当然它不能脱离轨道，所以需要给它一个半径，这个半径通用于所有的珠子，旋转角度则各不相同。下面是珠子独自属性与动画代码：</p><p><br></p><p>/* 珠子个性 */</p><p>.outer div:nth-child(1) {</p><p><span style="white-space:pre"> </span>background: black;</p><p><span style="white-space:pre"> </span>animation: rot 6s linear infinite;</p><p>}</p><p><br></p><p>/* 珠子运动方式 */</p><p>@keyframes rot {</p><p><span style="white-space:pre"> </span>from { transform: rotate(0deg) translate(calc(var(--len) / 2)) rotate(360deg); } </p><p><span style="white-space:pre"> </span>to { transform: rotate(360deg) translate(calc(var(--len) / 2)) rotate(0deg); } </p><p>}</p><p><br></p><p>解释一下动画：珠子初始形态是 旋转0deg、平移父元素的高宽尺寸的一半（这是所有珠子的固定半径）、翻转360deg（保持站姿）；终结状态：旋转360deg、保持半径、翻转0deg（保持站姿）。珠子在这两个状态之间来回变化，达成的目的就是做圆环运动，过程中始终保持着站立的姿势。</p><p><br></p><p>画手链是不需要这个动画的，但这个动画所经历的路线是其余珠子所在的位置，如前已述，这是在这里设计这个动画的原因。</p><p><br></p><p>各个珠子的位置分布依托于第一个rotate的角度和以半径单位进行平移（XY平移都可以），这最好用JS来完成，JS可以设定珠子数量、计算珠子rotate的角度和保持姿势而翻转回来的角度等等，珠子就用JS来批量生成，详情请查阅本文开头所给链接的帖子，那里提供有JS代码说明。</p><p><br></p><p>根据上述设计，HTML代码应如下，效果与完整代码查看后面的回复：</p><p><br></p><p><div class="outer"></p><p><span style="white-space:pre"> </span><div></div></p><p></div></p>
<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));
}
.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); }
}
</style>
<div class="outer">
<div></div>
</div>
二楼效果的完整代码：
<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));
}
还以为是那个手链的解说，原来是单独的一个珠子。嗯嗯，这个也漂亮{:4_187:} 红影 发表于 2022-4-11 16:25
还以为是那个手链的解说，原来是单独的一个珠子。嗯嗯，这个也漂亮
讲一个就行了，一点带面 马黑黑 发表于 2022-4-11 17:49
讲一个就行了，一点带面
要变成16个珠子，可能还得加其他语句吧，比如其他珠子的定位。 红影 发表于 2022-4-13 10:02
要变成16个珠子，可能还得加其他语句吧，比如其他珠子的定位。
参考那么的代码就行 马黑黑 发表于 2022-4-13 12:07
参考那么的代码就行
感觉上没那么容易的{:4_173:} 红影 发表于 2022-4-13 21:21
感觉上没那么容易的
貌似这边的难度要大一些 马黑黑 发表于 2022-4-13 22:06
貌似这边的难度要大一些
嗯嗯，会收到论坛设置的限制的吧。 红影 发表于 2022-4-15 09:34
嗯嗯，会收到论坛设置的限制的吧。
大概如此差不多的 马黑黑 发表于 2022-4-15 12:43
大概如此差不多的
正不容易，在坛子里实现还要经历一次磨难。 红影 发表于 2022-4-15 13:33
正不容易，在坛子里实现还要经历一次磨难。
当做是一次历练 马黑黑 发表于 2022-4-15 17:57
当做是一次历练
你本事那么大，还需要历练啊{:4_173:} 红影 发表于 2022-4-15 20:09
你本事那么大，还需要历练啊
历练不能停 马黑黑 发表于 2022-4-15 20:43
历练不能停
很勤奋{:4_204:} 红影 发表于 2022-4-16 21:43
很勤奋
必须的
页:
[1]