Html 用 CSS3 动画模仿眨眼标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13955163/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Imitating a blink tag with CSS3 animations
提问by m93a
I really want to make a piece of text blink the old-school style without using javascript or text-decoration.
我真的很想让一段文字闪烁老式风格而不使用 javascript 或文本装饰。
No transitions, only *blink*, *blink*, *blink*!
没有过渡，只有*眨眼*、*眨眼*、*眨眼*！
EDIT: This is different from that questionbecause I ask for blinkingwithout continuous transitions, whereas OP of the other questions asks how to replaceblinking with continuous transitions
回答by Neil
The original Netscape <blink>had an 80% duty cycle. This comes pretty close, although the real <blink>only affects text:
最初的 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;
}
}This is <span class="blink">blinking</span> text.You can find more info about Keyframe Animations here.
回答by m93a
Let me show you a little trick.
让我给你展示一个小技巧。
As Arkanciscan said, you can use CSS3 transitions. But his solution looks different from the original tag.
正如 Arkanciscan所说，您可以使用 CSS3 过渡。但是他的解决方案看起来与原始标签不同。
What you really need to do is this:
你真正需要做的是：
@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>回答by Belyash
Try this CSS
试试这个 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>? You need browser/vendor specific prefixes: http://jsfiddle.net/es6e6/1/.
? 您需要浏览器/供应商特定的前缀：http: //jsfiddle.net/es6e6/1/。
回答by S.B.
There's actually no need for visibilityor opacity- you can simply use color, which has the upside of keeping any "blinking" to the text only:
实际上不需要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.Fiddle: http://jsfiddle.net/2r8JL/
回答by airtonix
I'm going to hell for this :
我要为此下地狱：
=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
http://codepen.io/anon/pen/kaGxC(sass with bourbon)
回答by Sasha Sofin
Another variation
另一种变体
.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>回答by Ajay Kumar
It's working in my case blinking text at 1s interval.
在我的情况下，它以 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; }
}
回答by minaretsbayonet
if you want some glow effect use this
如果你想要一些发光效果使用这个
@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;
}
回答by Vishal Kiri
Please find below solution for your code.
请为您的代码找到以下解决方案。
@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>