标题几乎说明了一切,但这是一个示例。
假设我有一个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的值呢? 我想为这个组件提供两种风格,浅色和暗色,故定义了两个环境变量 但是我想为它的子组件提供不一样的浅色风格,于是重新定义了 最终的颜色却没有向我所想的那样,还是父元素上定义的颜色。当我检查该元素的