在从父级继承的伪元素上禁用CSS动画
标题几乎说明了一切，但这是一个示例。
假设我有一个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和/或margin则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..';
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>
定位所述伪元件（使用top，left，bottom，right）也具有影响动画。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的值呢？ 我想为这个组件提供两种风格，浅色和暗色，故定义了两个环境变量 但是我想为它的子组件提供不一样的浅色风格，于是重新定义了 最终的颜色却没有向我所想的那样，还是父元素上定义的颜色。当我检查该元素的