|
|

楼主 |
发表于 2025-8-1 08:25
|
显示全部楼层
一楼效果完整代码
- <style>
- .wrap {
- margin: 20px auto;
- position: relative;
- width: fit-content;
- height: fit-content;
- filter: drop-shadow(-40px 80px 0px rgba(0, 0, 0, .05));
- }
- .ma {
- --size: 240px;
- position: relative;
- width: var(--size);
- height: var(--size);
- display: grid;
- place-items: center;
- transform: rotateX(45deg) rotateY(15deg);
- animation: rot 8s linear infinite;
- }
- .ma::after {
- content: '';
- position: absolute;
- width: 24px;
- height: 24px;
- border-radius: 50%;
- background: radial-gradient(skyblue, snow);
- }
- .son {
- position: absolute;
- width: 100%;
- height: 4px;
- background: repeating-radial-gradient(circle, var(--bg1), var(--bg2), var(--bg1) 30%);
- transform: rotate(var(--a));
- --a: 90deg;
- }
- .son::before, .son::after {
- content: '';
- position: absolute;
- left: 0;
- top: calc(50% - 15px);
- width: 30px;
- height: 30px;
- background: inherit;
- border-radius: 50%;
- filter: drop-shadow(0 0 6px rgba(0,0,0,.5));
- }
- .son::after {
- left: calc(100% - 30px);
- }
- @keyframes rot {
- to { transform: rotateX(45deg) rotateY(15deg) rotateZ(360deg); }
- }
- </style>
- <div class="wrap">
- <div id="ma" class="ma"></div>
- </div>
- <script>
- var tt = 6;
- Array.from({length: tt}).forEach( (s,k) => {
- s = document.createElement('span');
- s.classList.add('son');
- s.style.cssText += `
- --a: ${180 / tt * k}deg;
- --bg1: #${Math.random().toString(16).substring(2,8)};
- --bg2: #${Math.random().toString(16).substring(2,8)};
- `;
- ma.appendChild(s);
- });
- </script>
复制代码
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
花飞飞
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|