使用CSS + JavaScript同时突出显示文本和调整动画大小
使用CSS + JavaScript同时突出显示文本和调整动画大小
提问于 2018-06-27 09:07:21
我对CSS，JavaScript和超文本标记语言非常陌生，所以这可能是一个新手问题。基本上，我希望文本高亮显示和大小同时更改。到目前为止，我有这样的想法：
-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')
}文本将高亮显示，但不会改变大小。我想不出为什么。我们非常欢迎任何帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-27 09:21:45
您将在before伪元素上设置新的字体大小，而不是在带有.hl类的元素上设置新字体大小。试试这个：
.animate .hl:before {
color: #fc0;
background: rgba(255,85,0,0.65);
height: 100%;
width: 100%;
}
.animate .hl {
font-size: 40px;
}Stack Overflow用户
发布于 2018-06-27 09:28:19
如果您切换一个类，在h1中添加和删除它，那么代码将类似于class = "h1 animate" (而不是相反)或class = h1。如果您更正了动画类，则文本将正确放大。
在这个fiddle中，我手动添加了animate类来显示放大的文本(我省略了javascript，因为我不知道您在哪里以及如何调用这个函数，但是您已经明白了)
希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51053204
复制相关文章
相似问题