设计一个简单的套娃小播

马黑黑

马黑黑

代码：

1. <style>
   
2.         .player {
   
3.             position: absolute;
   
4.             width: 200px;
   
5.             height: 200px;
   
6.             border-radius:
   
7.             50%;
   
8.             border: 2px solid green;
   
9.             border-color: orange red green transparent;
   
10.             filter: drop-shadow(0 0 30px gray);
    
11.             transition: width .45s, height .45s;
    
12.             cursor: pointer;
    
13.             display: grid;
    
14.             place-items: center;
    
15.             animation: rot 4s linear infinite;
    
16.             --deg: 1turn;
    
17.         }
    
18.         .player::before, .player::after {
    
19.             position: absolute;
    
20.             content: '';
    
21.             width: 90%;
    
22.              height: 90%;
    
23.              border: inherit;
    
24.              border-radius: inherit;
    
25.              border-color: inherit;
    
26.              animation: rot 4s linear infinite;
    
27.              --deg: 2turn;
    
28.          }
    
29.         .player::after {
    
30.             width: 80%;
    
31.             height: 80%;
    
32.             --deg: 3turn;
    
33.         }
    
34.         .player:hover {
    
35.             width: 210px;
    
36.             height: 220px;
    
37.         }
    
38.         .player > div {
    
39.             width: 70%;
    
40.             height: 70%;
    
41.             background: url('https://638183.freep.cn/638183/small/2025/b2.png') no-repeat center/80% 80%;
    
42.             border-color: transparent purple transparent cyan;
    
43.             --deg: 2turn;
    
44.         }
    
45.         @keyframes rot { to { transform: rotate(var(--deg)); } }
    
46. </style>
    
47. 
    
48. <div class="player">
    
49.         <div class="player"></div>
    
50. </div>

复制代码

马黑黑

可以考虑将阴影部分仅放在最里层的div，像这样：

1. <style>
   
2.         .player { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px solid green; border-color: orange red green transparent; transition: width .45s, height .45s; cursor: pointer; display: grid; place-items: center; animation: rot 4s linear infinite; --deg: 1turn; }
   
3.         .player::before, .player::after { position: absolute; content: ''; width: 90%; height: 90%; border: inherit; border-radius: inherit; border-color: inherit; animation: rot 4s linear infinite; --deg: 2turn; }
   
4.         .player::after { width: 80%; height: 80%; --deg: 3turn; }
   
5.         .player:hover { width: 210px; height: 220px; }
   
6.         .player > div { width: 70%; height: 70%; background: url('https://638183.freep.cn/638183/small/2025/b2.png') no-repeat center/80% 80%; border-color: transparent purple transparent cyan; filter: drop-shadow(0 0 30px gray); --deg: 2turn; }
   
7.         @keyframes rot { to { transform: rotate(var(--deg)); } }
   
8. </style>
   
9. 
   
10. <div class="player">
    
11.         <div class="player"></div>
    
12. </div>

复制代码

红影

那些圆环转得太快了，开始还以为是一样转着的，实际快慢完全不同，同样的时间里，有的转2圈有的转3圈呢，圈数越多的，转得越快。

红影

除了外面三色的三道，感觉里面双色的就一道，结果出现了三道，这个是.player > div 里的设置和html里设置相结合得出的结果么？

马黑黑

红影 发表于 2025-7-5 13:16
那些圆环转得太快了，开始还以为是一样转着的，实际快慢完全不同，同样的时间里，有的转2圈有的转3圈呢，圈 ...

@keyframes动画里 --deg 变量都是以 turn 或 360 的倍数为旋转目标圈数，需要控制速度的将 animation 里的 4s 改为长一点的秒数。

马黑黑

红影 发表于 2025-7-5 13:22
除了外面三色的三道，感觉里面双色的就一道，结果出现了三道，这个是.player > div 里的设置和html里设置相 ...

小播使用两个嵌套 div 做成，每一个带两个伪元素，所以共 6 个边框。

外层和里层的 div 都是用 class="player"，外层的有个id（便于控制）

红影

马黑黑 发表于 2025-7-5 13:39
小播使用两个嵌套 div 做成，每一个带两个伪元素，所以共 6 个边框。

外层和里层的 div 都是用 class= ...

原来是这么来的，我就说么，感觉边框多出来了

红影

马黑黑 发表于 2025-7-5 13:36
@keyframes动画里 --deg 变量都是以 turn 或 360 的倍数为旋转目标圈数，需要控制速度的将 animation 里 ...

嗯嗯，我已经去把它弄慢点了，为了弄清楚有多少个边框

杨帆

漂亮！谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-7-5 16:54
漂亮！谢谢马老师精彩分享

马黑黑

红影 发表于 2025-7-5 14:53
嗯嗯，我已经去把它弄慢点了，为了弄清楚有多少个边框

最简单的是把 animate 里的 rot 改为不存在的名称，比如 rot1，或者，把 @keyframes 的 rot 改为 rot1，这样，CSS动画就不会运行，可以慢慢数了

马黑黑

红影 发表于 2025-7-5 14:52
原来是这么来的，我就说么，感觉边框多出来了

两个 div 的边框，还可以继续套

花飞飞

马黑黑 发表于 2025-7-5 18:44
最简单的是把 animate 里的 rot 改为不存在的名称，比如 rot1，或者，把 @keyframes 的 rot 改为 rot1， ...

这方法太好了，一下子看清楚了结构。。
先是画了个原始的，再伪元素整出90.80各一层，这三层为一个单位。又套出一个70的
加上动画之后，几根线条就可以画出这么漂亮的效果。。这构思也是绝了

花飞飞

马黑黑 发表于 2025-7-5 18:45
两个 div 的边框，还可以继续套

又套了一个不过连背后的小球体一起套显示出来了。。
这样的效果转动起来特别漂亮。。
多套几层还真都能成功。。直接加DIV就可以了，乐得很

花飞飞

马黑黑 发表于 2025-7-5 11:10
可以考虑将阴影部分仅放在最里层的div，像这样：

阴影效果差别不是很大。。等会回来再看看

马黑黑

花飞飞 发表于 2025-7-5 20:51
又套了一个不过连背后的小球体一起套显示出来了。。
这样的效果转动起来特别漂亮。。
多套几 ...

要改装一下：只有最里层的 div 带图，比如第三个——

.player > div > div { background: url('图片地址') no-repeat center/cover }

马黑黑

花飞飞 发表于 2025-7-5 20:47
这方法太好了，一下子看清楚了结构。。
先是画了个原始的，再伪元素整出90.80各一层，这三层为一个单位 ...

CSS 貌似熟悉一点

马黑黑

花飞飞 发表于 2025-7-5 20:55
阴影效果差别不是很大。。等会回来再看看

效果不同的

花飞飞

马黑黑 发表于 2025-7-5 20:57
要改装一下：只有最里层的 div 带图，比如第三个——

.player > div > div { background: url('图片地 ...

看出来了，这个底图可以改成不同的图形。。
多套几层自然往里缩小，你这创意是真的很厉害啊