我真的想让一段文字在不使用javascript或文字装饰的情况下使老式风格闪烁。
无过渡,仅*闪烁*,*闪烁*,*闪烁*!
编辑:这与that question不同,因为我要求闪烁而没有连续转换,而其他问题的OP则询问如何替换使用连续转换闪烁
答案 0 :(得分:222)
最初的Netscape <blink>
占空比为80%。虽然真正的<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;
}
}
&#13;
This is <span class="blink">blinking</span> text.
&#13;
您可以找到有关Keyframe Animations here的更多信息。
答案 1 :(得分:80)
让我告诉你一个小技巧。
作为Arkanciscan said,您可以使用CSS3过渡。但他的解决方案看起来与原始标签不同。
你真正需要做的是:
@keyframes blink {
50% {
opacity: 0.0;
}
}
@-webkit-keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
-webkit-animation: blink 1s step-start 0s infinite;
}
<span class="blink">Blink</span>
答案 2 :(得分:45)
试试这个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/。
答案 3 :(得分:29)
实际上不需要visibility
或opacity
- 你可以简单地使用color
,这有利于保持任何&#34;闪烁&#34;仅限于文本:
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; } }
&#13;
Here is some text, <blink>this text will blink</blink>, this will not.
&#13;
答案 4 :(得分: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
答案 5 :(得分: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; }}
&#13;
This is <span class="blink">blink</span>
&#13;
答案 6 :(得分:1)
我的情况是以1s的间隔闪烁文本。
.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; }
}
答案 7 :(得分:1)
如果您想使文本平稳闪烁或类似内容,可以使用以下代码:
.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>
答案 8 :(得分:-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;
}
答案 9 :(得分:-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>