Question

我知道在CSS中，无序列表项目符号图像可以通过以下代码进行更改： ul {list-style-image：url（image）}

我可以使用类似的动画

  width: 25px;
  height: 25px;
  background: red;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
}

作为项目符号图像？如果没有，那么如何将动画图像用作项目符号图像？

Answer 1

要更改项目符号的颜色，您需要修改列表的color属性，但这也会使文本颜色更改，因此您需要将文本包装在其他元素中，例如{{1 }}并修改其颜色。

然后，您可以通过更改<span>属性来创建keyframe动画，然后像您一样将其应用于列表。

color

ul li {
  color: red;
  animation: animate 4s linear infinite;
}

ul li span {
  color: black;
}

@keyframes animate {
 0% {
   color: red;
 }
 50% {
   color: blue;
 }
 100% {
   color: red;
 }
}

Chrome和Firefox中的新功能使此操作变得越来越容易，因此请保持更新！

顺便说一句，它与javascript无关

如何制作动画子弹图像？

1 个答案: