|
|

楼主 |
发表于 2023-8-31 07:27
|
显示全部楼层
代码
- <style>
- #mydiv {
- margin: 30px;
- width: 200px;
- height: 200px;
- border: 2px dotted purple;
- border-radius: 50%;
- position: relative;
- display: grid;
- place-items: center;
- --size: 30px;
- --borderRadius: 0 50%;
- --mnColor: rgba(0,100,0,.75);
- }
- li-zi {
- position: absolute;
- width: var(--size);
- height: var(--size);
- border-radius: var(--borderRadius);
- }
- </style>
- <div id="mydiv"></div>
- <script>
- let total = 15;
- Array.from({length: total}).forEach( (item,key) => {
- let cc = '#' + Math.random().toString(16).substr(-6);
- item = document.createElement('li-zi');
- item.style.cssText += `
- background: ${cc};
- transform: rotate(${360 / total * key}deg) translate(100px);
- box-shadow: inset 0 0 ${10 + Math.random() * 10}px var(--mnColor);
- `;
- mydiv.appendChild(item);
- });
- </script>
复制代码
|
|