|
|

楼主 |
发表于 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>
复制代码
|
|