- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 CSS 动画在页面加载时淡入一些元素。动画完成后,文本“弹出”并变得比我想要的更粗。
更让我困惑的是,它似乎只在文本为某种红色阴影时才会发生。
运行下面的代码片段以查看它的实际效果。请注意只有红色标题似乎具有这种“弹出”效果。
body {
background: #000;
}
div {
background: #111;
padding: 2px 15px;
margin-bottom: 5px;
animation: fadein 2s;
}
h2 {
color: #FFF;
font-weight: normal;
font-size: 16px;
}
.white {
color: #FFF;
}
.red {
color: #fc1313;
}
.yellow {
color: #f2af2b;
}
.green {
color: #4cf22b;
}
/* FadeIn Effect */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div>
<h2 class="white">
Some White Title
</h2>
</div>
<div>
<h2 class="red">
Some Red Title
</h2>
</div>
<div>
<h2 class="yellow">
Some Yellow Title
</h2>
</div>
<div>
<h2 class="green">
Some Green Title
</h2>
</div>
为什么会发生这种情况,更重要的是,我怎样才能完全阻止这种情况发生?
最佳答案
我用来防止这种情况发生的一个 hacky 解决方案是将元素的不透明度设置为从 0 到 0.999 的动画。
body {
background: #000;
}
div {
background: #111;
padding: 2px 15px;
margin-bottom: 5px;
animation: fadein 2s;
opacity: 0.999;
}
h2 {
color: #FFF;
font-weight: normal;
font-size: 16px;
}
.white {
color: #FFF;
}
.red {
color: #fc1313;
}
.yellow {
color: #f2af2b;
}
.green {
color: #4cf22b;
}
/* FadeIn Effect */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.999;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.999;
}
}
<div>
<h2 class="white">
Some White Title
</h2>
</div>
<div>
<h2 class="red">
Some Red Title
</h2>
</div>
<div>
<h2 class="yellow">
Some Yellow Title
</h2>
</div>
<div>
<h2 class="green">
Some Green Title
</h2>
</div>
关于css - CSS 动画完成后 Chrome 中的文本 "pops"变粗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41509151/
所以下面的内容让我很困惑。 #!/usr/bin/python test = [0, 0, 0, 1, 2, 3, 4, 5, 6] test1 = [0, 0, 0, 1, 2, 3, 4, 5,
这个问题是这个问题的后续问题: deque.popleft() and list.pop(0). Is there performance difference? 在 Python 中,我可以使用 .
我正在使用 bootstrap v2.2.2。我尝试了其他一些方法(即: close popover outside popover but inside stay open 和 How to dis
我正在用 Python 创建提交后脚本并使用子进程调用 git 命令。 在我的脚本中,我想在运行某些命令之前存储所有更改,然后将它们 pop 。问题是,如果没有任何东西可以存储,stash pop 会
我有一个嵌入在 UINavigationController 中的 UITableViewController,我正在尝试将 Peek & Pop 实现到 TableView 中。我的“窥视”部分工作
我的 Windows 机器上安装了 Cygwin、msysgit 和 TortoiseGit。我正在为 Cygwin 编写一个脚本,该脚本通过 ssh 将 git 推送到远程机器: git push
我在 Jenkins 中使用groovy,并且我需要这个字符串来获取其中的最后一个单词。假设字符串是 STATUS = "EXECUTE SIT" 。所以我所做的就是分割字符串,这样我就会得到一个数组
本文是不太具体的问题的后续/重新表述 Is it possible to have a hyperlink inside {content:"..."}? . 用户 Naeem Shaikh ,非常感
Navigator.of(context).pop 和 Navigator.pop(context) 有什么区别? 对我来说两者似乎都在做同样的工作,实际的区别是什么。一个被弃用了吗? 最佳答案 Na
这可能吗?我想要一个更简单的命令来 git stash pop stash@{13} 其中 stash@{13} 只是 last 意思是“最后的存储在列表上”或“最古老的藏品”。 我知道我可以为 gi
Closed. This question is not reproducible or was caused by typos。它当前不接受答案。 想改善这个问题吗?更新问题,以便将其作为on-to
Visual Studio 2019 中用于 GIT 存储的以下命令有什么区别? 分阶段 pop 和恢复 (--index) 全部 pop 为未暂存状态 使用https://visualstudio.
我想弹出模型的最后一层。所以我使用了 tf.keras.layers.pop(),但它不起作用。 base_model.summary() base_model.layers.pop() base_m
我想使用 navigator.pop 将值从第 2 页传递到第 1 页,并使用 initstate 中的新值刷新或重新加载我的第 1 页或任何其他解决方法? 我能够在第一页中获取这些值,但无法使用 i
pop 函数的文档说: user> (doc pop) ------------------------- clojure.core/pop ([coll]) For a list or queu
我有以下点击处理程序,当点击它时,我从 handsontable 中提取一个数组然后从数组中删除最后一个元素,并将新数组传递给 ajax post。问题是,如果我再次单击该按钮,它将从数组中删除另一个
我在mailmuch中制作了表单并从中获取了代码,我添加到网页并使用href,当用户单击显示弹出窗口时显示表单。没关系 show popup 但是现在我有ajax请求,我希望在ajax返回成功时显示此
我目前正在学习 Python 中的 pop() 函数并有一个问题。 >>> a = [1,2,3,4] >>> a.pop(3) #or a.pop() 4 >>> print(a) [1,2,3]
我目前正在学习 Python 中的 pop() 函数并有一个问题。 >>> a = [1,2,3,4] >>> a.pop(3) #or a.pop() 4 >>> print(a) [1,2,3]
我可以将对象$push编码到Mongo数组上,如下所示: db.foo.update({},{$push:{bar:3}}) 但是我找不到一种语法,可以让我对列表中的最后一项进行$pop编码。 我已经
我是一名优秀的程序员,十分优秀!