我真的想在不使用 javascript 或 text-decoration 的情况下让一段文本以老式风格闪烁。
没有过渡，只有 *blink*、*blink*、*blink*！
这与那个问题不同，因为我要求在没有连续转换的情况下闪烁，而其他问题的 OP 询问如何用连续转换替换闪烁
问问题
299236 次
10 回答
270
最初的 Netscape<blink>有 80% 的占空比。这非常接近，尽管 real<blink>只影响文本：
.blink {
animation: blink-animation 1s steps(5, start) infinite;
-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}This is <span class="blink">blinking</span> text.您可以在此处找到有关关键帧动画的更多信息。
于 2013-04-15T10:30:36.727 回答
111
让我告诉你一个小技巧。
正如 Arkanciscan所说，您可以使用 CSS3 过渡。但他的解决方案看起来与原来的标签不同。
你真正需要做的是：
@keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
}<span class="blink">Blink</span>于 2012-12-19T15:02:54.497 回答
50
试试这个 CSS
@keyframes blink {
0% { color: red; }
100% { color: black; }
}
@-webkit-keyframes blink {
0% { color: red; }
100% { color: black; }
}
.blink {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
} This is <span class="blink">blink</span> 您需要浏览器/供应商特定的前缀：http: //jsfiddle.net/es6e6/1/。
于 2012-12-19T15:14:55.883 回答
32
实际上不需要visibilityor opacity- 你可以简单地使用color，它的好处是只对文本保持“闪烁”：
blink {
display: inline;
color: inherit;
animation: blink 1s steps(1) infinite;
-webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }Here is some text, <blink>this text will blink</blink>, this will not.小提琴：http: //jsfiddle.net/2r8JL/
于 2014-04-08T14:35:20.993 回答
10
我要为此下地狱：
=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@keyframes #{$name}
@content
+keyframes(blink)
25%
zoom: 1
opacity: 1
65%
opacity: 1
66%
opacity: 0
100%
opacity: 0
body
font-family: sans-serif
font-size: 4em
background: #222
text-align: center
.blink
color: rgba(#fff, 0.9)
+animation(blink 1s 0s reverse infinite)
+transform(translateZ(0))
.table
display: table
height: 5em
width: 100%
vertical-align: middle
.cell
display: table-cell
width: 100%
height: 100%
vertical-align: middle
于 2013-08-07T07:16:21.783 回答
6
另一种变化
.blink {
-webkit-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
@keyframes blink { 50% { visibility: hidden; }}This is <span class="blink">blink</span>于 2015-03-01T19:30:06.173 回答
3
如果你想要平滑闪烁的文本或类似的东西，你可以使用以下代码：
.blinking {
-webkit-animation: 1s blink ease infinite;
-moz-animation: 1s blink ease infinite;
-ms-animation: 1s blink ease infinite;
-o-animation: 1s blink ease infinite;
animation: 1s blink ease infinite;
}
@keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
@-moz-keyframes blink {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
@-webkit-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
@-ms-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
@-o-keyframes "blink" {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}<span class="blinking">I am smoothly blinking</span>于 2020-12-11T11:05:52.897 回答
2
在我的情况下，它以 1 秒的间隔闪烁文本。
.blink_me {
color:#e91e63;
font-size:140%;
font-weight:bold;
padding:0 20px 0 0;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% { opacity: 0.4; }
}
于 2016-09-05T09:17:03.100 回答
-3
如果你想要一些发光效果使用这个
@keyframes blink {
50% {
opacity: 0.0;
}
}
@-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
atom-text-editor::shadow .bracket-matcher .region {
border:none;
background-color: rgba(195,195,255,0.1);
border-bottom: 1px solid rgb(155,155,255);
box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
border-radius: 3px;
animation: blink 2s steps(115, start) infinite;
-webkit-animation: blink 2s steps(115, start) infinite;
}
于 2018-08-15T19:37:24.963 回答
-5
请为您的代码找到以下解决方案。
@keyframes blink {
50% {
color: transparent;
}
}
.loader__dot {
animation: 1s blink infinite;
}
.loader__dot:nth-child(2) {
animation-delay: 250ms;
}
.loader__dot:nth-child(3) {
animation-delay: 500ms;
}Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>于 2015-09-02T11:52:49.653 回答