主页 / coding / 问题 / 77385511
Accepted
Raqha
Asked: 2023-10-30 07:10:12 +0800 CST

CSS 动画值在两步函数中插值

  • 772

我想对类似于光标的东西使用简单的闪烁动画，我只是做了一个动画，其中不透明度从 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>

css

1 个回答

  1. Best Answer

    这就是steps()应该如何工作。这不是很直观，但您需要的是一步并使 at 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>

    • 1

相关问题