设计一个简单的套娃小播

马黑黑 发表于 2025-7-5 11:08

本帖最后由马黑黑于 2025-7-5 13:31 编辑 <br /><br /><style>
.wrap { margin: auto; width: 100%; height: 460px; display: grid; place-items: center; position: relative; }
.player { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px solid green; border-color: orange red green transparent; filter: drop-shadow(0 0 30px gray); transition: width .45s, height .45s; cursor: pointer; display: grid; place-items: center; animation: rot 4s linear infinite; --deg: 1turn; }
.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; }
.player::after { width: 80%; height: 80%; --deg: 3turn; }
.player:hover { width: 210px; height: 220px; }
.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; --deg: 2turn; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div class="wrap">
<div class="player">
<div class="player"></div>
</div>
</div>

马黑黑 发表于 2025-7-5 11:08

本帖最后由马黑黑于 2025-7-5 12:16 编辑

代码：

<style>
   .player {
         position: absolute;
         width: 200px;
         height: 200px;
         border-radius:
         50%;
         border: 2px solid green;
         border-color: orange red green transparent;
         filter: drop-shadow(0 0 30px gray);
         transition: width .45s, height .45s;
         cursor: pointer;
         display: grid;
         place-items: center;
         animation: rot 4s linear infinite;
         --deg: 1turn;
   }
   .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;
      }
   .player::after {
         width: 80%;
         height: 80%;
         --deg: 3turn;
   }
   .player:hover {
         width: 210px;
         height: 220px;
   }
   .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;
         --deg: 2turn;
   }
   @keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div class="player">
   <div class="player"></div>
</div>

马黑黑 发表于 2025-7-5 11:10

本帖最后由马黑黑于 2025-7-5 12:16 编辑

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

<style>
   .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; }
   .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; }
   .player::after { width: 80%; height: 80%; --deg: 3turn; }
   .player:hover { width: 210px; height: 220px; }
   .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; }
   @keyframes rot { to { transform: rotate(var(--deg)); } }
</style>

<div class="player">
   <div class="player"></div>
</div>

红影发表于 2025-7-5 13:16

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

红影发表于 2025-7-5 13:22

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

马黑黑 发表于 2025-7-5 13:36

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

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

马黑黑 发表于 2025-7-5 13:39

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

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

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

红影发表于 2025-7-5 14:52

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

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

原来是这么来的，我就说么，感觉边框多出来了{:4_173:}

红影发表于 2025-7-5 14:53

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

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

杨帆发表于 2025-7-5 16:54

漂亮！谢谢马老师精彩分享{:4_191:}

马黑黑 发表于 2025-7-5 18:42

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

{:4_190:}

马黑黑 发表于 2025-7-5 18:44

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

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

马黑黑 发表于 2025-7-5 18:45

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

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

花飞飞 发表于 2025-7-5 20:47

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

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

花飞飞 发表于 2025-7-5 20:51

本帖最后由花飞飞于 2025-7-5 20:52 编辑

马黑黑发表于 2025-7-5 18:45
两个 div 的边框，还可以继续套
又套了一个不过连背后的小球体一起套显示出来了。。{:4_173:}
这样的效果转动起来特别漂亮。。
多套几层还真都能成功。。直接加DIV就可以了，乐得很

花飞飞 发表于 2025-7-5 20:55

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

阴影效果差别不是很大。。等会回来再看看{:4_173:}

马黑黑 发表于 2025-7-5 20:57

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

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

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

马黑黑 发表于 2025-7-5 20:57

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

CSS 貌似熟悉一点{:4_189:}

马黑黑 发表于 2025-7-5 21:00

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

效果不同的

花飞飞 发表于 2025-7-5 21:04

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

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

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

页: [1] 2 3 4 5 6 7 8

花潮论坛's Archiver

设计一个简单的套娃小播