CSS + JavaScript 同时文本突出显示和大小动画

Question

我对 CSS、JavaScript 和 HTML 还很陌生，所以这可能是一个菜鸟问题。基本上，我希望文本突出显示和大小同时更改。到目前为止我有这个：

-webkit-transition: font-size 0.5s;
-moz-transition: font-size 0.5s;
-o-transition: font-size 0.5s;
transition: font-size 0.5s;
}


.hl:before {
content: "";
position: absolute;
bottom: 0;
left: 0px;
height: 65%;
width: 0;
-webkit-transition: width 0.8s, background 2s, font-size 2s;
transition: width 0.8s, background 2s, font-size 2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transform-origin: left;
transform-origin: left bottom;
overflow: hidden;
z-index: -1;
box-shadow: 2px 0 0 2px rgba(230,249,0,0.15) inset;
border-radius: 3px;
-webkit-transform: skewX(-2deg) rotate(-1.5deg) translateY(0);
transform: skewX(-2deg) rotate(-1.5deg) translateY(0);
background: rgba(0, 204, 82,0.85);
box-shadow: 2px 0 0 2px rgba(0,216,255,0.1) inset;
}

.animate .hl:before {
font-size: 40px;
color: #fc0;
background: rgba(255,85,0,0.65);
height: 100%;
width: 100%;
}

This should be <span class="h1"> highlighted</span>

js 文件如下所示：

function highlight_stuff() {
  $('html').toggleClass('animate')
}

文本会突出显示，但不会改变大小。我不知道为什么。非常欢迎任何帮助。

Answer 1

您在 before 伪元素而不是带有 .hl class 的元素上设置新的字体大小。试试这个：

.animate .hl:before {
  color: #fc0;
  background: rgba(255,85,0,0.65);
  height: 100%;
  width: 100%;
}

.animate .hl {
  font-size: 40px;
}

Answer 2

如果您要切换 class，将其附加到 h1，然后再将其从 h1 中删除，则代码将类似于 class = "h1 animate"（而不是相反）或 class = h1。如果您更正动画 class 那么文本将正确放大。

在这个 fiddle 中，我手动添加了 animate class 以显示放大的文本（我省略了 javascript，因为我不知道在哪里或如何你正在调用函数，但你得到了图片）

希望这对您有所帮助

CSS + JavaScript 同时文本突出显示和大小动画

Simultaneous text highlight and size animation with CSS + JavaScript

javascript

html

css

animate.css