纯CSS模拟钟摆运动

红影

马黑黑 发表于 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 2s  linear infinite;
}

.div3 {
    ...
    animation: iFlay 5s  ease-in-out infinite alternate;
}

红影

马黑黑 发表于 2022-1-28 20:04
动画是被各元素调用的。比方说，设置了一个 iFly 的动画，那么：

.div1 {

哦哦，每个元素用同样的动画名字？可能需要转的角度是不一样的啊。

马黑黑

红影 发表于 2022-1-28 21:10
哦哦，每个元素用同样的动画名字？可能需要转的角度是不一样的啊。

如果不一样的运动模式，则另外设置动画，多个动画

红影

马黑黑 发表于 2022-1-28 21:23
如果不一样的运动模式，则另外设置动画，多个动画

嗯嗯，知道了

马黑黑

红影 发表于 2022-1-28 22:26
嗯嗯，知道了

红影

马黑黑 发表于 2022-1-29 08:31

已经做出来了一个，但不是纯css模拟的，而是加了图图。主要想让上面摆和下面摆的都能放在同一张底图上

红影

我那个帖子里如果把图片的钟摆换成纯css模拟的也很简单，我主要是学一个思路

马黑黑

红影 发表于 2022-1-29 10:36
已经做出来了一个，但不是纯css模拟的，而是加了图图。主要想让上面摆和下面摆的都能放在同一张底图上{:4 ...

借助实体对象来实现展现更经济

马黑黑

红影 发表于 2022-1-29 10:37
我那个帖子里如果把图片的钟摆换成纯css模拟的也很简单，我主要是学一个思路

对，思路才是设计的灵魂

红影

马黑黑 发表于 2022-1-29 10:38
借助实体对象来实现展现更经济

但是纯css的更高级，我是为了好玩，直接扣了个怀表，就用上了

马黑黑

红影 发表于 2022-1-29 10:43
但是纯css的更高级，我是为了好玩，直接扣了个怀表，就用上了

可以的。你就回忆一下马黑黑吃，都是对图片进行的动画

红影

马黑黑 发表于 2022-1-29 10:39
对，思路才是设计的灵魂

我不会弄2个以上的动画，折腾了好半天。不过还是在黑黑的指导下做出来了，开心

红影

马黑黑 发表于 2022-1-29 10:44
可以的。你就回忆一下马黑黑吃，都是对图片进行的动画

你说的很对，只是我经常性的反应不过来

马黑黑

红影 发表于 2022-1-29 11:02
你说的很对，只是我经常性的反应不过来

红影

马黑黑 发表于 2022-1-29 11:14

那个我光是看着好玩了，没去认真学习一下代码

马黑黑

红影 发表于 2022-1-29 13:08
那个我光是看着好玩了，没去认真学习一下代码

简单的代码学学一下，学的多了，复杂的也能看出一两个道理来

红影

马黑黑 发表于 2022-1-29 13:42
简单的代码学学一下，学的多了，复杂的也能看出一两个道理来

嗯嗯，必须把基础打好，才能看懂更多的，看懂了，才能做出自己想要的东东。