队长来学学如何让一个东东转起来
本帖最后由 马黑黑 于 2022-4-24 23:28 编辑假设我们有一个div盒子，
<div class="mybox"></div>
它的CSS是这样（CSS代码要放在HTML代码的前面去），
<style>
.mybox {
width: 100px;
height: 80px;
border: 1px solid;
}
</style>
那么，如何让它转起来呢？当然要先设计一个关键帧动画 @keyframes + 名称，用 transform 属性的 rotate 方法，代码放在CSS里。并在 .mybox 部分的代码里加入 animation 属性（下面代码红色部分）：
<style>
.mybox {
width: 100px;
height: 80px;
border: 1px solid;
animation: rot 2s linear infinite;
/* rot 是动画名称，2s 是2秒一个周期，linear是平滑运行，infinite是循环运行 */
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
就酱，东东就能转起来了
先来占位跟着学习，把队长挤出二环去{:4_173:} 红影 发表于 2022-4-24 23:30
先来占位跟着学习，把队长挤出二环去
嗯，挤他去学学，老是不会{:4_170:} 好的好的，谢谢老黑。我去学习中制作。。。{:4_190:} 加林森 发表于 2022-4-25 12:37
好的好的，谢谢老黑。我去学习中制作。。。
祝队长成功 马黑黑 发表于 2022-4-25 12:49
祝队长成功
好的好的。 加林森 发表于 2022-4-25 13:57
好的好的。
弄出来了没 马黑黑 发表于 2022-4-25 19:04
弄出来了没
我在你给的新的编辑器里做成功了，还没有与音乐关联起来，就看见一个长方行在转。 加林森 发表于 2022-4-25 20:29
我在你给的新的编辑器里做成功了，还没有与音乐关联起来，就看见一个长方行在转。
能转就成功了一半 马黑黑 发表于 2022-4-25 20:46
能转就成功了一半
嗯嗯，挺好用的。谢谢老黑了！{:4_191:} 马黑黑 发表于 2022-4-24 23:41
嗯，挤他去学学，老是不会
算了，还是把沙发留给他吧{:4_189:} 红影 发表于 2022-4-25 22:53
算了，还是把沙发留给他吧
不知道学会了木有 加林森 发表于 2022-4-25 20:55
嗯嗯，挺好用的。谢谢老黑了！
掌握原理很重要 马黑黑 发表于 2022-4-25 23:30
掌握原理很重要
是的是的。我明白了的。{:4_191:} 加林森 发表于 2022-4-25 23:31
是的是的。我明白了的。
{:4_180:} 马黑黑 发表于 2022-4-26 06:45
谢茶！ 加林森 发表于 2022-4-26 09:26
谢茶！
{:5_108:} 马黑黑 发表于 2022-4-26 12:17
{:4_191:} 马黑黑 发表于 2022-4-25 23:13
不知道学会了木有
啃到黑黑已经让那孔雀转起来了{:4_199:} 红影 发表于 2022-4-26 21:14
啃到黑黑已经让那孔雀转起来了
队长都不去驱动它，等不耐烦了
页:
[1]
2