时间戳

首页 > 解决方案 > 如何使动画在 wordpress 中的特定页面上工作

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

问题描述

我有以下用于联系页面动画的 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像有故障的电视机一样闪烁。背景应该是白色的，文本是黑色的，带有一种条形或屏幕，可以上下移动单词以隐藏和显示它。

问题1：它不起作用，为什么？

问题 2：当我开始使用body它时，我的整个网站都搞砸了。当我从page-id-1239它开始时，它什么也没做。

标签： htmlcsswordpress

解决方案

更新

查看您的站点后，添加以下行：

.contact {
  …
  line-height: 2;
}

问题1：它不起作用，为什么？

您如何调用动画存在问题。

  • 不恰当的速记属性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选择器。您需要在它前面加上一个点.或井号#，分别表示 aclass或id。

page-id-1239 { … }

推荐阅读