当前位置: 首页 > 面试题库 >

在从父级继承的伪元素上禁用CSS动画

楚俊杰
2023-03-14
问题内容

标题几乎说明了一切,但这是一个示例。

假设我有一个CSS“加载微调器”,如下所示:

.spinner {
    height: 50px;
    width: 50px;
    position: relative;
    animation: rotate .6s infinite linear;
    border-left: 6px solid #222;
    border-right: 6px solid #222;
    border-bottom: 6px solid #222;;
    border-top: 6px solid #ccc;
    border-radius: 100%; 
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

我想为此添加一个伪元素-例如,content: 'loading...'在before或after之后.spinner

是否可以确保伪元素不会继承动画.spinner,或者伪元素必须 始终 采用父元素所拥有的动画?


问题答案:

由于伪元素是父元素的子元素,因此只要父元素具有动画,它将继续旋转。即使animation: none在伪元素上进行设置也无效。

使其看起来好像孩子没有动画的唯一方法是反转效果,如下面的代码片段所示。正在执行的操作是将完全相同的动画添加到伪元素,但是将animation- direction设置为reverse。这意味着伪对象将获得精确的反向变换效果,因此将其保留在相同位置。

.spinner {

  height: 50px;

  width: 50px;

  position: relative;

  animation: rotation .6s infinite linear;

  border-left: 6px solid #222;

  border-right: 6px solid #222;

  border-bottom: 6px solid #222;

  border-top: 6px solid #ccc;

  border-radius: 100%;

}

.spinner:after {

  position: absolute;

  content: 'Loading..';

  top: 0px;

  left: 0px;

  height: 100%;

  width: 100%;

  animation: rotation .6s infinite linear reverse; /* added this line */

}

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}


<div class='spinner'></div>

上面的代码段使用的默认设置transform-origin是,50% 50%但如果子伪元素具有padding和/或margintransform- origin必须相应地调整该设置,以避免伪元素产生类似发抖的效果。下面的代码段提供了计算逻辑。

.spinner {

  height: 50px;

  width: 50px;

  position: relative;

  animation: rotation .6s infinite linear;

  border-left: 6px solid #222;

  border-right: 6px solid #222;

  border-bottom: 6px solid #222;

  border-top: 6px solid #ccc;

  border-radius: 100%;

}

.spinner.parent-padded-margin {

  padding: 10px;

  margin: 10px;

}

.spinner:after {

  position: absolute;

  content: 'Loading..';

  top: 0px;

  left: 0px;

  height: 100%;

  width: 100%;

  animation: rotation .6s infinite linear reverse;

  /* added this line */

}

.spinner.child-padded-margin:after {

  padding: 10px 8px;

  margin: 5px 4px;

  transform-origin: calc(50% - 12px) calc(50% - 15px);  /* calc(50% - ((padding-left + padding-right)/2 + margin-left)) calc(50% - ((padding-top + padding-bottom)/2 + margin-top)) */

}

.spinner.child-padded-margin-2:after {

  padding: 10px 6px 16px 14px;

  margin: 7px 12px 5px 10px;

  transform-origin: calc(50% - 20px) calc(50% - 20px);  /* calc(50% - ((padding-left + padding-right)/2 + margin-left)) calc(50% - ((padding-top + padding-bottom)/2 + margin-top)) */

}

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}


<div class='spinner'></div>

<div class='spinner parent-padded-margin'></div>

<div class='spinner child-padded-margin'></div>

<div class='spinner child-padded-margin-2'></div>

定位所述伪元件(使用topleftbottomright)也具有影响动画。transform- origin为了使动画正常工作,还需要对其进行相应的修改。以下代码段提供了一个示例。

.spinner {

  height: 50px;

  width: 50px;

  position: relative;

  animation: rotation .6s infinite linear;

  border-left: 6px solid #222;

  border-right: 6px solid #222;

  border-bottom: 6px solid #222;

  border-top: 6px solid #ccc;

  border-radius: 100%;

}

.spinner.parent-padded-margin {

  padding: 10px;

  margin: 10px;

}

.spinner:after {

  position: absolute;

  content: 'Loading..';

  height: 100%;

  width: 100%;

  animation: rotation .6s infinite linear reverse;  /* added this line */

}

.spinner.child-positioned{

    margin-bottom: 40px;

  }

.spinner.child-positioned:after {

  top: 120%;

  left: 2%;

  transform-origin: calc(50% - 2%) calc(50% - 120%); /* basically need to subtract the distance from the left and top of the container */

}

.spinner.child-positioned-negative:after {

  bottom: -120%;

  right: -2%;

  transform-origin: calc(50% - 2%) calc(50% - 120%); /* basically need to subtract the distance from the left and top of the container */

}

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}


<div class='spinner child-positioned'></div>

<div class='spinner child-positioned-negative'></div>

注意: 以上两种解决方案在最新版本的Chrome,Opera和Safari中都可以正常工作,但会导致文本在IE
11,Edge和Firefox中显示倾斜。Firefox似乎需要一个单独的动画,该动画从FF的rotate(-10deg)变为旋转(-370deg),而在IE中变得更加复杂。

没有在伪(子)元素上设置反向动画的唯一替代 方法是利用Chris 在其评论中 提到方法
。这将意味着直接将边框和动画设置为伪元素。这将意味着父级的内容不会受到影响,因为父级不会受到子级转换的影响。

.spinner {

  height: 50px;

  width: 50px;

  position: relative;

}

.spinner:after {

  position: absolute;

  content: '';

  top: 0px;

  left: 0px;

  height: 100%;

  width: 100%;

  animation: rotation .6s infinite linear;

  border-left: 6px solid #222;

  border-right: 6px solid #222;

  border-bottom: 6px solid #222;

  border-top: 6px solid #ccc;

  border-radius: 100%;

}

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}


<div class='spinner'>Loading...</div>


 类似资料:
  • 本文向大家介绍如何取消从父级元素继承下来的CSS样式呢?相关面试题,主要包含被问及如何取消从父级元素继承下来的CSS样式呢?时的应答技巧和注意事项,需要的朋友参考一下 如果是恢复单个属性样式,例如,可以使用 如果是将所有属性样式恢复为默认状态,可以使用

  • 问题内容: 我该如何继承其父代的样式和javascript。 我努力了 但是,它会删除标签。此外,我看不到影响iframe的样式。 我是否有更好/其他的方法来解决这个问题?谢谢。 问题答案: 您可以通过在iframe中使用以下代码来“继承”父级的CSS: 在IE,Chrome和Firefox中对我来说效果很好。 关于JavaScript,我找不到直接将父JavaScript添加到iframe中的方

  • 问题内容: 我知道曾有人问过这个问题,但是在将其标记为重复之前,我想告诉您我的情况与在互联网上发现的情况有些不同。 我正在构建和嵌入脚本,人们可以将其放在自己的网站上。此脚本创建一个具有一定宽度/高度的div,并在其中包含一些信息。 我的问题是某些网站声明了div样式,这些样式也被我的div继承。 例如: 因此,如果我没有为div设置任何背景色,即使我不想要它也将显示为红色。 我唯一能采用的解决方

  • 主要内容:1. ::after,2. ::before,3. ::first-letter,4. ::first-line,5. ::selection,6. ::placeholder伪元素是一个附加在选择器末尾的关键词,通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式,或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中,伪元素的使用与伪类相同,都是使一个冒号 与选择器相连。但在 C

  • CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法:selector:pseudo-element {property:value;} CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中,浏览器会根据 "

  • css变量问题:父元素的一个变量A的值取决于该元素上定义的的另一个变量B,如果我在其子元素上重新定义一个B,并使用A做为某个属性的值,那么此时A的值是等于父元素上的变量B的值呢?还是重新定义的这个B的值呢? 我想为这个组件提供两种风格,浅色和暗色,故定义了两个环境变量 但是我想为它的子组件提供不一样的浅色风格,于是重新定义了 最终的颜色却没有向我所想的那样,还是父元素上定义的颜色。当我检查该元素的