主页 / user-14379859

Raqha's questions

Martin Hope
Raqha
Asked: 2023-10-30 07:10:12 +0800 CST
  • 6

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