html - 如何使动画在 wordpress 中的特定页面上工作

Question

我有以下用于联系页面动画的 HTML 和 CSS:

page-id-1239 {
  background: #000;
  display: flex;
  align- items: center;
  height: 100vh;
  justify-content: center;
}

.contact {
  font-family: arial;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 7rem;
  max-width: 1200px;
  margin: 0 auto;
}

.contact::before .contact::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact::before {
  left: 2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 red;
  background: #000;
  animation: brasil-anim-2 1s infinite linear alternate- reverse;
}

.contact:after {
  left: -2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 blue 000;
  animation: brasil-anim-1 1s infinite linear alternate- reverse;
  Animation-delay: -1s;
}

@keyframes brasil-anim-1 {
  0% {
    Clip: rect(20px, 1200px, 76px, 0);
  }
  20% {
    Clip: rect(19px, 1200px, 16px, 0);
  }
  40% {
    Clip: rect(16px, 1200px, 3px, 0);
  }
  60% {
    Clip: rect(62px, 1200px, 78px, 0);
  }
  80% {
    Clip: rect(25px, 1200px, 13px, 0);
  }
  100% {
    Clip: rect(53px, 1200px, 86px, 0);
  }
}

@keyframes brasil-anim-2 {
  0% {
    Clip: rect(79px, 1200px, 86px, 0);
  }
  20% {
    Clip: rect(20px, 1200px, 30px, 0)
  }
  40% {
    Clip: rect(25px, 1200px, 5px, 0)
  }
  60% {
    Clip: rect(65px, 1200px, 85px
  }
  80% {
    Clip: rect(120px, 1200px, 145px, 0)
  }
  100% {
    clip: rect(95px, 1200px, 75px, 0)
  }
}

<div class="contact" data
text="CONTACT">CONTACT</div>

这应该会产生一个动画，其中单词 contact 会像有故障的电视机一样闪烁。背景应该是白色的，文本应该是黑色的，带有一种上下移动单词的条形或屏幕以隐藏和显示它。

问题一:不行，为什么？

问题 2:当我从 body 开始时，它把我的整个网站搞得一团糟。当我从 page-id-1239 开始时，它什么也没做。

Answer 1

更新

查看您的网站后，添加以下行:

.contact {
  …
  line-height: 2;
}

---

问题一:不行，为什么？

您调用动画的方式存在问题。

• 不正确的简写属性 alternate-reverse。您必须删除破折号和 'reverse' 的 'r' 之间的空格

还有一些其他拼写错误，但没有任何问题阻止动画正常工作。

.page-id-1239 {
  background: #000;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.contact {
  font-family: arial;
  position: relative;
  color: #fff;
  text-align: center;
  font-size: 7rem;
  max-width: 1200px;
  margin: 0 auto;
}

.contact::before,
.contact::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact::before {
  left: 2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 red;
  background: #000;
  animation: brasil-anim-2 1s infinite linear alternate-reverse;
}

.contact:after {
  left: -2px;
  clip: rect(79px, 1200px, 86px, 0);
  text-shadow: -1px 0 blue 000;
  animation: brasil-anim-1 1s infinite linear alternate-reverse;
  animation-delay: -1s;
}

@keyframes brasil-anim-1 {
  0% {
    clip: rect(20px, 1200px, 76px, 0);
  }
  20% {
    clip: rect(19px, 1200px, 16px, 0);
  }
  40% {
    clip: rect(16px, 1200px, 3px, 0);
  }
  60% {
    clip: rect(62px, 1200px, 78px, 0);
  }
  80% {
    clip: rect(25px, 1200px, 13px, 0);
  }
  100% {
    clip: rect(53px, 1200px, 86px, 0);
  }
}

@keyframes brasil-anim-2 {
  0% {
    clip: rect(79px, 1200px, 86px, 0);
  }
  20% {
    clip: rect(20px, 1200px, 30px, 0);
  }
  40% {
    clip: rect(25px, 1200px, 5px, 0);
  }
  60% {
    clip: rect(65px, 1200px, 85px);
  }
  80% {
    clip: rect(120px, 1200px, 145px, 0);
  }
  100% {
    clip: rect(95px, 1200px, 75px, 0);
  }
}

<div class="contact" data-text="CONTACT">CONTACT</div>

问题 2:当我从 body 开始时，它弄乱了我的整个网站。当我从 page-id-1239 开始时，它什么也没做。

您包含的不是有效的 CSS 选择器。您需要在它前面加上点 . 或井号 # 以分别表示 class 或 id .

page-id-1239 { … }