为了账号安全,请及时绑定邮箱和手机立即绑定

在CSS3动画中模仿眨眼标签

在CSS3动画中模仿眨眼标签

慕姐8265434 2019-10-25 11:00:13
我真的很想让一段文字在不使用JavaScript或文字修饰的情况下闪烁出旧式风格。没有过渡,只有* blink *,* blink *,* blink *!编辑:这与该问题不同,因为我要求没有连续过渡的眨眼,而其他问题的OP问如何用连续过渡来代替眨眼
查看完整描述

3 回答

?
www说

TA贡献1775条经验 获得超8个赞

最初的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.


查看完整回答
反对 回复 2019-10-25
?
慕的地6264312

TA贡献1817条经验 获得超6个赞

让我向您展示一些技巧。


正如Arkanciscan 所说,您可以使用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>


查看完整回答
反对 回复 2019-10-25
  • 3 回答
  • 0 关注
  • 720 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信