CSS:圆周运动的简单实现

红影

红影

现学现用，又一个祝福帖子完成了，开心。
我又错了，应该弄个半透明的蛋糕去转圈，哈哈。这个帖子先存这里，这会没法找音乐，等晚上找个音乐再去正式发帖。还没有消寒没凑出来字呢，先去消寒了。

红影

马黑黑 发表于 2021-12-29 12:57
可以飞多个

我飞不起来，你多肥几个看看呗

马黑黑

红影 发表于 2021-12-29 16:55
我飞不起来，你多肥几个看看呗

我肥我才飞不起

多飞几个的话，以父带子的方式，让几对父子并排在一起或上下飞都是实现思路

马黑黑

加林森 发表于 2021-12-29 13:24
嗯嗯，明白的。先设置父容器，再制作子容器，它就在父容器动起来了。

这里，是父容器转圈圈，子跟父动，所以严格来讲，那个球球是不动的

马黑黑

红影 发表于 2021-12-29 13:22
可不可以小球和替换成图片，也引入一个底版图片，让一张图图在另一张图图上飞？

实现思路有两种：

一种是父带子的方式，即本帖介绍的方法，再给球球加个爷爷，爷爷在最外层，带有背景图。父透明，带着儿子转。

第二种是直接让球球儿子转，父亲在外层不动，有背景图。这要用到 transform 的另一个属性方法，我们还没介绍。

马黑黑

加林森 发表于 2021-12-29 13:22
是的，慢慢学就是了。多看多观察，自己动手制作就会理解的。

是这个道理的

加林森

马黑黑 发表于 2021-12-29 18:10
这里，是父容器转圈圈，子跟父动，所以严格来讲，那个球球是不动的

嗯嗯

马黑黑

红影 发表于 2021-12-29 13:20
明白了，因为有50%的倒角，所以透明底变成了圆，我笨的，还以为直径剩300了，其实还是600.

radius 设值维 50% 得出的就是一个圆

小辣椒

马黑黑 发表于 2021-12-29 12:19
效果演示 

.fDiv { /* 父容器 */

黑黑，我想不通，这个小圆球连色码都没有的，怎么会出来一个有颜色的圆球？

小辣椒

效果演示
 

红影

马黑黑 发表于 2021-12-29 18:00
我肥我才飞不起

多飞几个的话，以父带子的方式，让几对父子并排在一起或上下飞都是实现思路

呵呵，打错字了。i，这样的话要用到定位代码的吧。

红影

马黑黑 发表于 2021-12-29 18:14
实现思路有两种：

一种是父带子的方式，即本帖介绍的方法，再给球球加个爷爷，爷爷在最外层，带有背景 ...

嗯嗯，原来是爸爸带着儿子转，我说之前设置儿子的位置怎么没用

红影

马黑黑 发表于 2021-12-29 18:17
radius 设值维 50% 得出的就是一个圆

嗯嗯，这个看到过，你把正方形的图片直接变成了圆。前面我以为是小球飞，原来是哪个透明底板在飞。

马黑黑

红影 发表于 2021-12-29 22:22
嗯嗯，这个看到过，你把正方形的图片直接变成了圆。前面我以为是小球飞，原来是哪个透明底板在飞。

是的，是父层div旋转带动的小球飞，小球实际上不动

马黑黑

小辣椒 发表于 2021-12-29 21:46
黑黑，我想不通，这个小圆球连色码都没有的，怎么会出来一个有颜色的圆球？

在 CSS 代码里定义了颜色，class="ball" 这句就是在 div 中使用CSS代码的 .ball 部分的属性

红影

马黑黑 发表于 2021-12-29 22:37
是的，是父层div旋转带动的小球飞，小球实际上不动

前面我理解错了

马黑黑

红影 发表于 2021-12-29 23:39
前面我理解错了

多看几次就能理解

红影

马黑黑 发表于 2021-12-29 23:55
多看几次就能理解

这个的构思很奇妙，专门设置个透明父容器做载体，这个玩法很牛

马黑黑

红影 发表于 2021-12-30 10:49
这个的构思很奇妙，专门设置个透明父容器做载体，这个玩法很牛

行业里这类妙法不算什么