当前位置: 首页 > 面试题库 >

在CSS3动画中模仿眨眼标签

夹谷成仁
2023-03-14
问题内容

我真的很想让一段文字闪烁传统风格,而不使用javascript或文字修饰。

没有过渡,只有 blink blink blink

编辑 :这不同于该问题,因为我要求不连续转换的_闪烁_ ,而其他问题的OP询问如何 用连续转换代替 闪烁 __


问题答案:

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


 类似资料:
  • #animated_div{ width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1;

  • 问题内容: 我需要在某些文本上执行一系列动画处理,并且我打算使用CSS3。我的计划是使一些文本缓慢地在屏幕上向下移动,并到达屏幕的特定部分后,某些单词将被突出显示,最终文本将继续在屏幕上向下移动并消失,为进一步的文本留出空间。 我的问题是,“链接”这些动画的最佳方法是什么。我是否应该有一个用于向下移动屏幕的动画,一个用于突出显示文本的单独动画以及一个用于向下移动屏幕其余部分的动画?然后,是否应该将

  • 动画是进行形状变化和用元素创建动作的过程。 @keyframes 关键帧将控制CSS3中的中间动画步骤。 带左动画的关键帧示例 - @keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px;

  • 问题内容: 我使用的规则的组合来实现CSS3 的跨浏览器兼容的方式可能的规则:我使用,,,和。 任何版本的Internet Explorer 是否都具有类似的属性?是否有针对旧版IE的专有过滤器,类似于以下规则在IE 6-8中的不透明度如何起作用? 问题答案: 在旧版本的IE中没有任何过渡效果。 我所知道的唯一接近它的方法是使用JQuery 和方法,它们在IE的所有版本中都有效。 但是,我应该警告

  • 问题内容: 我想在我的WP博客中添加它。这样,每个新的div帖子的边框上都会有此动画。但是问题在于它在SVG中。无论如何,我可以在不使用SVG的情况下使此动画工作,并且我也不想使用javascript。 可以说代码是: 问题答案: CSS可以做到这一点,并且在使用多个背景并使用动画更改其位置时非常简单。 这是一个页面加载后边框连续不断移动的示例。 归功于web-tiki,它有助于修复最初在动画每个

  • 问题内容: 无法使此动画图像正常工作,它应该进行360度旋转。 我猜下面的CSS有点问题,因为它保持静止。 问题答案: 这是 正确的动画CSS: 有关代码的一些注意事项: 您已将关键帧嵌套在规则中,这是不正确的 不适用于绝对定位的元素 看看caniuse:IE10不需要前缀