用两步函数内插的css动画值

发布于10月30日

我想用一个简单的闪烁动画来做一些应该像光标的东西，我刚刚制作了一个动画，其中不透明度从0到1，步长函数为无穷大.

但出于某种原因，它不会在0和1之间变化，而是在0和0.5左右之间变化，我希望文本为白色，黑色为白色，但黑色为灰色.我是不是理解不了动画，还是这是奇怪的行为？或者，有没有更好的办法呢？

body{
  background: black;
  color:white;
}

.cursor::after{
  content: "";
  width: 0.5rem;
  height: 0.2rem;
  opacity: 1;
  background: white;
  display: inline-block;
}

.c1::after{
 animation: cursorblink 1s steps(2) infinite;
}
 
.c2::after{
  animation: cursorblink2 1s steps(2) infinite;
}
 
@keyframes cursorblink{
  0% {opacity:0}
}

@keyframes cursorblink2{
  0% {opacity:0}
  100% {opacity:1}
}

<span class="cursor c1"></span> <span class="cursor reference"></span>  <span class="cursor c2"></span>

推荐答案

这就是steps()应该是如何工作的.这不是很直观，但您需要的是一个步骤，将opacity: 0设置为50%(0%和100%默认情况下为opacity: 1

body{
  background: black;
  color:white;
}

.cursor::after{
  content: "";
  width: 0.5rem;
  height: 0.2rem;
  background: white;
  display: inline-block;
}

.c1::after,
.c2::after{
 animation: cursorblink 1s steps(1) infinite;
}
 

@keyframes cursorblink{
  50% {opacity:0}
}

<span class="cursor c1"></span> 
<span class="cursor reference"></span>  
<span class="cursor c2"></span>

Css相关问答推荐

CSS Grid我不想要的东西

有人可以解释为什么我的 CSS 转换如此突然吗？

为什么我的 CSS 转换在 React 18 中不起作用

2 列 UL，右列中的列表项数量为奇数？

最多 2 行的 Flex 水平滚动

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

BootStrap：右对齐嵌套手风琴

CSS背景位置从顶部的给定像素开始？

为什么我的 CSS 需要一个它似乎不需要的大括号？

弹簧靴.一个文件捕获 CSS 其他没有

如何强制 div 出现在下方而不是旁边？

BEM 块、命名和嵌套

绝对位置和溢出：隐藏

如何通过 JavaScript 重新触发 WebKit CSS 动画？

CSS媒体查询仅针对iPad和iPad？

通过javascript删除或禁用浏览器的焦点边框

如何计算所需的色调旋转以生成特定 colored颜色？

CSS - 使 div 水平对齐

带有一些 LESS 魔法的花式媒体查询

CSS(webkit)：在绝对定位元素上用底部覆盖顶部

实用课程推荐