马黑黑 发表于 2022-1-28 13:59
这是设计的巧妙之处，图中的样子就是 rotate(-25deg)的表现。接着，动画设计可以省事：transform: rotate ...
如果一个帖子里要放两个摆动怎么放，比如我把钟摆和玫瑰都放在一张图片上，可以写两个@keyframes 么？
红影 发表于 2022-1-28 15:57
如果一个帖子里要放两个摆动怎么放，比如我把钟摆和玫瑰都放在一张图片上，可以写两个@keyframes 么？
可以只用一个，调用动画时设置不同的属性，比如时间一个2s，一个3s，等等
马黑黑 发表于 2022-1-28 17:03
可以只用一个，调用动画时设置不同的属性，比如时间一个2s，一个3s，等等
具体应该怎样设置呢？只用一个，但它们的名字不同啊，并排写？
红影 发表于 2022-1-28 19:27
具体应该怎样设置呢？只用一个，但它们的名字不同啊，并排写？
动画是被各元素调用的。比方说，设置了一个 iFly 的动画，那么：
.div1 {
...
animation: iFlay 1s infinite;
}
.div2 {
...
animation: iFlay 2slinear infinite;
}
.div3 {
...
animation: iFlay 5sease-in-out infinite alternate;
}
马黑黑 发表于 2022-1-28 20:04
动画是被各元素调用的。比方说，设置了一个 iFly 的动画，那么：
.div1 {
哦哦，每个元素用同样的动画名字？可能需要转的角度是不一样的啊。
红影 发表于 2022-1-28 21:10
哦哦，每个元素用同样的动画名字？可能需要转的角度是不一样的啊。
如果不一样的运动模式，则另外设置动画，多个动画
马黑黑 发表于 2022-1-28 21:23
如果不一样的运动模式，则另外设置动画，多个动画
嗯嗯，知道了{:4_204:}
红影 发表于 2022-1-28 22:26
嗯嗯，知道了
{:5_108:}
马黑黑 发表于 2022-1-29 08:31
已经做出来了一个，但不是纯css模拟的，而是加了图图。主要想让上面摆和下面摆的都能放在同一张底图上{:4_205:}
我那个帖子里如果把图片的钟摆换成纯css模拟的也很简单，我主要是学一个思路{:4_187:}
红影 发表于 2022-1-29 10:36
已经做出来了一个，但不是纯css模拟的，而是加了图图。主要想让上面摆和下面摆的都能放在同一张底图上{:4 ...
借助实体对象来实现展现更经济
红影 发表于 2022-1-29 10:37
我那个帖子里如果把图片的钟摆换成纯css模拟的也很简单，我主要是学一个思路
对，思路才是设计的灵魂
马黑黑 发表于 2022-1-29 10:38
借助实体对象来实现展现更经济
但是纯css的更高级，我是为了好玩，直接扣了个怀表，就用上了{:4_173:}
红影 发表于 2022-1-29 10:43
但是纯css的更高级，我是为了好玩，直接扣了个怀表，就用上了
可以的。你就回忆一下马黑黑吃，都是对图片进行的动画
马黑黑 发表于 2022-1-29 10:39
对，思路才是设计的灵魂
我不会弄2个以上的动画，折腾了好半天。不过还是在黑黑的指导下做出来了，开心{:4_205:}
马黑黑 发表于 2022-1-29 10:44
可以的。你就回忆一下马黑黑吃，都是对图片进行的动画
你说的很对，只是我经常性的反应不过来{:4_173:}
红影 发表于 2022-1-29 11:02
你说的很对，只是我经常性的反应不过来
{:4_170:}
马黑黑 发表于 2022-1-29 11:14
那个我光是看着好玩了，没去认真学习一下代码{:4_173:}
红影 发表于 2022-1-29 13:08
那个我光是看着好玩了，没去认真学习一下代码
简单的代码学学一下，学的多了，复杂的也能看出一两个道理来
马黑黑 发表于 2022-1-29 13:42
简单的代码学学一下，学的多了，复杂的也能看出一两个道理来
嗯嗯，必须把基础打好，才能看懂更多的，看懂了，才能做出自己想要的东东。