как создать анимированное изображение маркера?

#html #css

#HTML #css

Вопрос:

Я знаю, что в 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;}
}
  

как изображение маркера? если нет, то как использовать анимированное изображение в качестве пули-изображения?

Ответ №1:

Чтобы изменить цвет маркера, вам нужно изменить color свойство списка, но это также изменит цвет вашего текста, поэтому вам нужно обернуть текст внутри другого элемента, например, a <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;
 }
}  
 <ul>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
  <li><span>Item</span></li>
</ul>  

Это становится проще с новыми функциями в Chrome и Firefox, поэтому следите за обновлениями!

Кстати, это не связано с javascript