<style type="text/css">
.dDiv {
width: 1000px;
height: 600px;
background: url('http://image.hnol.net/c/2021-12/30/09/202112300942138961-4765111.gif') no-repeat;
position: relative;
left: -142px;
top: 80px;
}
.jDiv { /* 父容器 */
margin:0 auto;
width:460px;
height:460px;
background:transparent; /* 背景色透明 */
position: relative;
left: -202px;
top: 80px;
animation:linear rotate 5s infinite;
}
.bll { /* 子容器 */
margin:0 auto;
width:180px;
height:180px;
}
@keyframes rotate {
to
{ transform:rotate(360deg); } /* 转一圈 */
}
</style>
<div class="dDiv">
<div class="jDiv">
<img class="bll" alt="" src="https://pic.imgdb.cn/item/61cc05112ab3f51d91b97d49.png"></div>
</div>
</div>
现学现用，又一个祝福帖子完成了，开心。{:4_173:}
我又错了，应该弄个半透明的蛋糕去转圈，哈哈。这个帖子先存这里，这会没法找音乐，等晚上找个音乐再去正式发帖。还没有消寒没凑出来字呢，先去消寒了。
马黑黑 发表于 2021-12-29 12:57
可以飞多个
我飞不起来，你多肥几个看看呗{:4_173:}
红影 发表于 2021-12-29 16:55
我飞不起来，你多肥几个看看呗
我肥我才飞不起{:4_170:}
多飞几个的话，以父带子的方式，让几对父子并排在一起或上下飞都是实现思路
加林森 发表于 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 { /* 父容器 */
黑黑，我想不通，这个小圆球连色码都没有的，怎么会出来一个有颜色的圆球？
<p>效果演示<br> </p>
<style type="text/css">
.fDiv { /* 父容器 */
margin:0 auto;
width:400px;
height:400px;
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 18:00
我肥我才飞不起
多飞几个的话，以父带子的方式，让几对父子并排在一起或上下飞都是实现思路
呵呵，打错字了。i，这样的话要用到定位代码的吧。
马黑黑 发表于 2021-12-29 18:14
实现思路有两种：
一种是父带子的方式，即本帖介绍的方法，再给球球加个爷爷，爷爷在最外层，带有背景 ...
嗯嗯，原来是爸爸带着儿子转，我说之前设置儿子的位置怎么没用{:4_173:}
马黑黑 发表于 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旋转带动的小球飞，小球实际上不动
前面我理解错了{:4_173:}
红影 发表于 2021-12-29 23:39
前面我理解错了
多看几次就能理解
马黑黑 发表于 2021-12-29 23:55
多看几次就能理解
这个的构思很奇妙，专门设置个透明父容器做载体，这个玩法很牛{:4_199:}
红影 发表于 2021-12-30 10:49
这个的构思很奇妙，专门设置个透明父容器做载体，这个玩法很牛
行业里这类妙法不算什么