使用CSS3动画模仿闪烁标记

时间:2012-12-19 15:02:54

标签: html css css3 css-animations blink

我真的想让一段文字在不使用javascript或文字装饰的情况下使老式风格闪烁。

无过渡,仅*闪烁*,*闪烁*,*闪烁*!


编辑:这与that question不同,因为我要求闪烁而没有连续转换,而其他问题的OP则询问如何替换使用连续转换闪烁

10 个答案:

答案 0 :(得分:222)

最初的Netscape <blink>占空比为80%。虽然真正的<blink>仅影响文字:

,但这非常接近

&#13;
&#13;
.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;
&#13;
&#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>

JSfiddle Demo

答案 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)

实际上不需要visibilityopacity - 你可以简单地使用color,这有利于保持任何&#34;闪烁&#34;仅限于文本:

&#13;
&#13;
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;
&#13;
&#13;

小提琴:http://jsfiddle.net/2r8JL/

答案 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

http://codepen.io/anon/pen/kaGxC(波旁威士忌)

答案 5 :(得分:6)

另一种变化

&#13;
&#13;
.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;
&#13;
&#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>