|
|

楼主 |
发表于 2023-12-23 14:08
|
显示全部楼层
代码
- <style>
- #mydiv {
- margin: 100px auto;
- width: 200px;
- height: 200px;
- border-radius: 50%;
- box-shadow: 4px 8px 28px gray, inset 0 0 160px lightblue;
- background: lightgreen;
- display: grid;
- place-items: center;
- position: relative;
- }
- li-zi {
- position: absolute;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: navy;
- opacity: .95;
- animation: moving var(--duration) var(--delay) linear infinite alternate;
- }
- @keyframes moving {
- from { transform: translate(0,0); }
- to { transform: translate(var(--xx),var(--yy)); }
- }
- </style>
- <div id="mydiv"></div>
- <script>
- let r = mydiv.offsetWidth / 2 - 10, total = 30;
- Array.from({length: total}).forEach((item,key) => {
- let rad = (Math.PI / 180) * 360 / total;
- item = document.createElement('li-zi');
- item.style.cssText += `
- --xx: ${r * Math.cos(rad * key)}px;
- --yy: ${r * Math.sin(rad * key)}px;
- --duration: ${2 + Math.random() * 3}s;
- --delay: -${Math.random() * 5}s;
- background: #${Math.random().toString(16).substr(-6)};
- `;
- mydiv.appendChild(item);
- });
- </script>
复制代码
|
|