马黑黑 发表于 2021-12-29 12:17

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>

马黑黑 发表于 2021-12-29 12:19

<p>效果演示<br>&nbsp;</p>
<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>

马黑黑 发表于 2021-12-29 12:25

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

马黑黑 发表于 2021-12-29 12:27

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

红影 发表于 2021-12-29 12:43

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

红影 发表于 2021-12-29 12:44

这个好玩，这么大的地方能不能飞两个球啊{:4_189:}

红影 发表于 2021-12-29 12:50

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

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

马黑黑 发表于 2021-12-29 12:57

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

可以飞多个

马黑黑 发表于 2021-12-29 13:00

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

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

.ball { ... }

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

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

马黑黑 发表于 2021-12-29 13:06

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

<p>如果未引入动画，则最初的布局是酱紫：<br>&nbsp;</p>
<div style="margin:0 auto;width:600px;height:600px;border:1px solid #aaa;">
    <div style="margin:0 auto;width:50px;height:50px;border-radius:50%;background:coral;"></div>
</div>
<p>&nbsp;<br>外框设计边框，目的是为了看清布局</p>

加林森 发表于 2021-12-29 13:08

老黑又出新教程了，真好！{:4_199:}

马黑黑 发表于 2021-12-29 13:10

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

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

加林森 发表于 2021-12-29 13:11

是子容器里的吧

加林森 发表于 2021-12-29 13:12

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

哦，谢谢老黑！{:4_190:}

马黑黑 发表于 2021-12-29 13:13

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

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

马黑黑 发表于 2021-12-29 13:13

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

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

红影 发表于 2021-12-29 13:20

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

   


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

加林森 发表于 2021-12-29 13:22

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

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

红影 发表于 2021-12-29 13:22

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

.ball { ... }


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

加林森 发表于 2021-12-29 13:24

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

嗯嗯，明白的。先设置父容器，再制作子容器，它就在父容器动起来了。
页: [1] 2 3
查看完整版本: CSS:圆周运动的简单实现