CSS:圆周运动的简单实现

马黑黑

CSS:圆周运动的简单实现 | 马黑黑

思路：正方体父容器加载一个子容器，父容器旋转，设计成圆球型的子容器会跟着旋转。若父容器不可见，则子容器看上去就像是自己旋转一样。

代码：

<style type="text/css">
.fDiv { /* 父容器 */
        margin:0 auto;
        width:600px;
        height:600px;
        background:transparent; /* 背景色透明 */
        animation:linear rotate 5s infinite;

}

.ball { /* 子容器 */
        margin:0 auto;
        width:50px;
        height:50px;
        border-radius:50%;
        background:coral;
}
@keyframes rotate {
        to
                { transform:rotate(360deg); } /* 转一圈 */
}
</style>

<div class="fDiv">
        <div class="ball"></div>
</div>

马黑黑

效果演示
 

马黑黑

一楼“正方体”应改为“正方形”，笔误

马黑黑

现在介绍的动画都是基于2维的，3维动画需要2维基础

红影

class="ball"，原来不用给地址，直接这样也行。

红影

这个好玩，这么大的地方能不能飞两个球啊

红影

红影 发表于 2021-12-29 12:43
class="ball"，原来不用给地址，直接这样也行。

哦哦，我弄错了，那个是引用的名字，哈哈。

马黑黑

红影 发表于 2021-12-29 12:44
这个好玩，这么大的地方能不能飞两个球啊

可以飞多个

马黑黑

红影 发表于 2021-12-29 12:43
class="ball"，原来不用给地址，直接这样也行。

CSS中的类选择器都命名为 .+名称，如 .ball ——

.ball { ... }

凡调用这样的选择器，都用 class （类），同一个web页里可以反复调用:

<div class="ball">...</div>

马黑黑

红影 发表于 2021-12-29 12:50 哦哦，我弄错了，那个是引用的名字，哈哈。

如果未引入动画，则最初的布局是酱紫：
 

 
外框设计边框，目的是为了看清布局

加林森

老黑又出新教程了，真好！

马黑黑

加林森 发表于 2021-12-29 13:08
老黑又出新教程了，真好！

这个不是新的，是之前介绍到的内容的综合运用，意在给大家提供一些思路，希望从中能得到启发

加林森

是子容器里的吧

加林森

马黑黑 发表于 2021-12-29 13:10
这个不是新的，是之前介绍到的内容的综合运用，意在给大家提供一些思路，希望从中能得到启发

哦，谢谢老黑！

马黑黑

加林森 发表于 2021-12-29 13:11
是子容器里的吧

那个球，就是子容器，一个弄成圆形边框的div，它置于一个父容器中（也是一个div，有大于子容器的高宽尺寸）

马黑黑

加林森 发表于 2021-12-29 13:12
哦，谢谢老黑！

我知道我的步伐有点快，大家一时跟不上。这也正常，慢慢领悟

红影

马黑黑 发表于 2021-12-29 13:06
如果未引入动画，则最初的布局是酱紫：&nbsp;

   

明白了，因为有50%的倒角，所以透明底变成了圆，我笨的，还以为直径剩300了，其实还是600.

加林森

马黑黑 发表于 2021-12-29 13:13
我知道我的步伐有点快，大家一时跟不上。这也正常，慢慢领悟

是的，慢慢学就是了。多看多观察，自己动手制作就会理解的。

红影

马黑黑 发表于 2021-12-29 13:00
CSS中的类选择器都命名为 .+名称，如 .ball ——

.ball { ... }

可不可以小球和替换成图片，也引入一个底版图片，让一张图图在另一张图图上飞？

加林森

马黑黑 发表于 2021-12-29 13:13
那个球，就是子容器，一个弄成圆形边框的div，它置于一个父容器中（也是一个div，有大于子容器的高宽尺寸 ...

嗯嗯，明白的。先设置父容器，再制作子容器，它就在父容器动起来了。