我正在尝试应用我在该视频中看到的很酷的“故障效果”here :
但是,我似乎无法让这个动画工作。这是我尝试将效果应用到的标题元素:
<h1 class="header-block-heading-primary">Web Developer</h1>
这是 SCSS:
.header-block-heading-primary {
// animation: glitch-effect 3s infinite;
position: relative;
&::before,
&::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
&::before {
color: red;
animation: glitch-effect 3s infinite;
}
&::after {
color: blue;
animation: glitch-effect 2s infinite;
}
}
这是动画:
@keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
这是输出的 CSS:
.header-block-heading-primary {
position: relative;
}
.header-block-heading-primary::before,
.header-block-heading-primary::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
.header-block-heading-primary::before {
color: red;
-webkit-animation: glitch-effect 3s infinite;
animation: glitch-effect 3s infinite;
}
.header-block-heading-primary::after {
color: blue;
-webkit-animation: glitch-effect 2s infinite;
animation: glitch-effect 2s infinite;
}
我遵循了与教程相同的设置,甚至引用了我的一些旧元素来查看 ::before
和 ::after
的使用,它们工作正常使用几乎相同的代码(对于伪元素)就好了。
我只尝试了单个分号,所以 :before
& :after
,但没有用。我将动画直接添加到元素本身(正如注释掉的 //animation: glitch-effect 3s infinite;
在 .header-block-heading-primary
下看到的那样选择器),它工作正常,所以我被引导相信 ::before
和 ::after
元素不工作。在嵌套的 SCSS 中手动添加 -webkit-
也不起作用。
我查看了该站点上的其他多个帖子,但找不到可以帮助我解决此问题的答案。因此,我们将不胜感激任何对此的帮助!
最佳答案
您的动画正在运行,但您需要设置 ::after
和 ::before
content:"Web Developer"
。你可以在片段中显示效果。
.header-block-heading-primary {
position: relative;
}
.header-block-heading-primary::before,
.header-block-heading-primary::after {
position: absolute;
left: 0;
top: 0;
content: "Web Developer";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
.header-block-heading-primary::before {
color: red;
animation: glitch-effect 3s infinite;
}
.header-block-heading-primary::after {
color: blue;
animation: glitch-effect 2s infinite;
}
@keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
<h1 class="header-block-heading-primary">Web Developer</h1>
这是在我的页面中运行的 sass 代码,请尝试此代码。
.header-block-heading-primary {
position: relative;
&::before,
&::after {
position: absolute;
left: 0;
top: 0;
content: "Web Developer";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
&::before {
color: red;
animation: glitch-effect 3s infinite;
}
&::after {
color: blue;
animation: glitch-effect 2s infinite;
}
}
@keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
谢谢。
关于css - 嵌套的伪元素::之前&::不使用@keyframes 动画之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57849407/