Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » » Список с анимированным маркером на CSS

Список с анимированным маркером на CSS

galina2601 15-11-2017, 20:52 1 832 Уроки по CSS / Списки

Ну и еще один список в коллекцию.
На сей раз  - маркированный. Создан он на основе тега для нумерованных списков. Но это не принципиально. 

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

При наведении на элемент списка, маленький красный кружок внутри большого двигается вправо.

Итак, это сам код списка. Абсолютно обычный:

<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;}

Похожие новости

  • Еще один красивый список с помощью CSS
  • Красивый список с помощью CSS
  • Многоуровневые списки с помощью html и css
  • Как сделать красивый маркер в списке
  • Урок 4. Создание списков

  • Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив