Анимация упорядоченного списка с помощью CSS

В этом посте мы рассмотрим, как можно улучшить вид заурядных списков, используемых на сайтах. Мы анимируем упорядоченные списки с помощью CSS. Идея заключается в том, что когда пользователь наводит указатель мыши на очередной элемент пронумерованного списка, иконка, стоящая в начале элемента будет анимированна, а какую анимацию ,из двух представленных здесь выбрать решать вам.

Для начала скачайте исходник к данному эффекту со списками.

Шаг 1. HTML

Во-первых подключим таблицу стилей CSS, которая позволит нам достичь нужного эффекта. Подключать ее будем между тегами :

<link rel="stylesheet" type="text/css" href="styles.css" />

Во-вторых нам необходимо разметить HTML страницу для наших анимированных списков, то есть мы создадим просто два упорядоченных списка с разными классами, чтобы получилось два примера с анимацией:

<ol class="rounded-list"> <li><a href="">Первый пункт списка</a></li> <li><a href="">Второй пункт списка</a></li> <li><a href="">Третий пункт списка</a> <ol> <li><a href="">Первый подпункт списка</a></li> <li><a href="">Второй подпункт списка</a></li> <li><a href="">Третий подпункт списка</a></li> </ol> </li> <li><a href="">Четвертый пункт списка</a></li> <li><a href="">Пятый пункт списка</a></li> </ol> <ol class="rectangle-list"> <li><a href="">Первый пункт списка</a></li> <li><a href="">Второй пункт списка</a></li> <li><a href="">Третий пункт списка</a> <ol> <li><a href="">Первый подпункт списка</a></li> <li><a href="">Второй подпункт списка</a></li> <li><a href="">Третий подпункт списка</a></li> </ol> </li> <li><a href="">Четвертый пункт списка</a></li> <li><a href="">Пятый пункт списка</a></li> </ol>

Шаг 2. CSS

В этом методе используется автоматическая нумерация для элементов упорядоченного списка. Список базируется на двух свойствах CSS 2.1: counter-reset (инициализация счетчика) и counter-increment (увеличение предидущего счетчика). Свойство counter-increment будет использоваться с содержанием, генерируемым CSS.

ol{ counter-reset: li; /* Инициализация счетчика */ list-style: none; /* Удаляем нумерацию по умолчанию */ *list-style: decimal; /* Для IE6/7 используем нумерацию по умолчанию */ font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); } ol ol{ margin: 0 0 0 2em; /* Добавляем небольшое поле слева для вложенного списка */ }

Нумерация с круглыми иконками:

Для придания упорядоченному списку вида с круглыми иконками в таблице стилей CSS прописываем следующие параметры:

.rounded-list a{ position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rounded-list a:hover{ background: #eee; } .rounded-list a:hover:before{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .rounded-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

Нумерация с квадратными иконками:

Для придания упорядоченному списку вида с квадратными иконками в таблице стилей CSS прописываем следующие параметры:

.rectangle-list a{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 2.5em; background: #ddd; color: #444; text-decoration: none; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rectangle-list a:hover{ background: #eee; } .rectangle-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #fa8072; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .rectangle-list a:after{ position: absolute; content: ''; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .rectangle-list a:hover:after{ left: -.5em; border-left-color: #fa8072; }
На этом мы завершим рассмотрение данного эффекта, более подробно все рассмотреть можно в исходнике.
демо
скачать
источник