代码之家 › 专栏 › 技术社区 › Lovs

使用sass将不同的动画应用于具有相同类的元素

sass css html

Lovs · 技术社区 · 6 年前

想象一下下面的HTML结构:

<div class="myClass" />
<div class="myClass" />
<div class="myClass" />

这些div代表一个对象,具有以下sass:

.myClass {
  position: absolute;
  animation: shake 5s infinite;
  animation-timing-function: linear;
}

现在,我想让他们全部实施 shake 动画,但以不同的方式-第一个DIV向左/向右移动,第二个DIV向上/向下移动等-一般来说,所有的动画都应该具有相同的动画,并进行细微的调整。
我已经到了使用s a s s制作3个不同动画的地步。 @for 但这并不能解决我的问题,因为编译之后,所有具有相同类的元素都被赋予了相同的动画。
示例:我生成了3个不同的 shake-1 , shake-2 , shake-3 动画,即使我使用sass函数,也只有一个应用于具有相同类的所有HTML元素。

关于如何处理这个问题有什么想法吗?

2 回复 | 直到 6 年前

ElusiveCoder 6 年前

你可以这样做…

<div class="myClass" />
<div class="myClass" />
<div class="myClass" />

.myClass:first-child {
  position: absolute;
  animation: shake-1 5s infinite;
  animation-timing-function: linear;
}
.myClass:nth-child(2) {
  position: absolute;
  animation: shake-2 5s infinite;
  animation-timing-function: linear;
}
.myClass:nth-child(3) {
  position: absolute;
  animation: shake-3 5s infinite;
  animation-timing-function: linear;
}

Chandru 6 年前

最好的办法是为每个分区添加一个额外的类。

这就好像:

<div class="myClass shake-lr"></div>
<div class="myClass shake-tb"></div>
<div class="myClass shake-dia"></div>

然后在您的css/sass中:

.myClass
  position: absolute
  animation-timing-function: linear
.shake-lr 
  animation: shake-1 5s infinite
.shake-tb
  animation: shake-2 5s infinite
// ... and so on

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前