#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