Список с анимированным маркером на CSS
galina2601 15-11-2017, 20:52 1 941 Уроки по CSS / СпискиНу и еще один список в коллекцию.
На сей раз - маркированный. Создан он на основе тега для нумерованных списков. Но это не принципиально.
При наведении на элемент списка, маленький красный кружок внутри большого двигается вправо.
Итак, это сам код списка. Абсолютно обычный:
<ol class="ball"> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> <li><a href="#">Элемент списка</a></li> </ol>
А это набор стилей для списка:
.ball {
list-style: none;
margin: 0;
}
.ball a {
width: 100%;
color: #808285;
text-decoration: none;
display: inline-block;
padding-left: 25px;
height: 44px;
line-height: 44px;
font-size: 20px;
position: relative;
transition: .3s linear;
}
.ball a:before {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #425273;
position: absolute;
left: -30px;
top: 7px;
}
.ball li {position: relative;}
.ball li:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background: #EC351D;
position: absolute;
top: 12px;
left: -30px;
z-index: 2;
transition: .4s ease-in-out;
}
.ball li:hover:before {left: -20px;}