Информационные круги с эффектами переходов на CSS

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

Начнем?

HTML

Для большинства примеров мы будем использовать это структуру :



Давайте определимся с общим стилем для списка и его элементов:



Мы можем центрировать списки, используя встроенный дисплей блока и установки выравнивания текста.
Автором Clearfix хака является Николя Галлахер: http://nicolasgallagher.com/micro-clearfix-hack/
Некоторые из примеров будут иметь различную структуру, но мы рассмотрим это в каждом примере более подобно.

Пример 1



В первом примере будет показано описание его масштабирования, так же будет анимированная вставка, тень окна. Итак, давайте положение пункта установим относительное, биф вставка, тень окна и переходный период:



Как вы заметили раньше, мы дали два класса для элемента:
один ct-item, а другой будет использоваться для определения конкретных фоновый изображений:



Описание элемента будет позиционироваться абсолютно, и мы дадим ему полупрозрачный фон, установив значение RGBA. Его прозрачность будет 0, и мы будет масштабировать ее до 0:



Название этого пункта будет иметь некоторые установки прокладки и поля, плавные тени текста:



Абзац элемент имеет 0 непрозрачность и перехода ( мы хотим, чтобы он исчез при наведении курсора мыши, но с задержкой):



Ссылка будет в верхнем регистре, и мы сделаем цвет при наведении желтый:



И вот, интересное действие пр наведении!
Будет происходить распространение радиуса тени окна от 16px до 1px:



Описание будет исчезать и масштабироваться до 1:



И параграф описания будет просто исчезать (с задержкой):



И это первый пример! Давайте взглянем на следующий.

Пример 2



HTML структура в данном случае такая же как и в первом.

В этом примере мы будем использовать box-shadow для пункта, чтобы заполнить наш круг и чтобы он был фоном описания.
Так, ничего особенного здесь нет, только box-shadow, имеет еще одно значение строки:



И background-images:



Описание будет сокращено:



И стиль типографских элементов:



В наведении мы анимируем вставки box-shadow (красноватые) с распространением радиуса в 110px:



И мы будет расширять описание:



Пример 3



В этом примере мы будем работать с вращением. Структура будет немного отличаться от первых двух примеров, поскольку мы должны добавить эскиз в качестве второй дивизии. Таким образом, элемент, элемент списка будет выглядеть следующим образом:



Пункт разделение будет иметь стиль, как и раньше (с тонким box-shdow тенью):



Эскиз элемента будет иметь конкретные преобразования происходящие (где-то справа в центре) и переходов. Это будет элемент, который мы хотим повернуть вниз при наведении курсора мыши так, чтобы он раскрывал описание элементов :



С помощью псевдо-класса: after мы создадим небольшую латунную застежку с радиальным градиентом:



Давайте определим фоновые изображения для каждого элемента:



Desciption элемент будет иметь следующие стили:



Типографские элементы будут расположены и стилизованы следующим образом:



Якорем будет маленький кружок, который будет двигаться справа при наведении:



Так как мы хотим, чтобы движение и непрозрачность происходили с задержкой, но фон парил без перехода, мы отделим переходы:



Пример 4



Этот пример будет включать в себя некоторые 3D повороты. Таким образом, нам нужно настроить структуру, чтобы иметь контейнер для перспективных сторон спереди и сзади. Таким образом, элементы списка будут выглядеть следующим образом:



Как вы видите, мы добавим фоновое изображение для элемента разделения, а также передней части деления.
Хитрость заключается в том, чтобы дать тот же фон в ch-info-wrap, как тело. Это даст иллюзию, как будто наш элемент имеет отверстие.

Этот пункт будет иметь обычный стиль:



Дополнительная оболочка будет использоваться на перспективу, и мы будем добавлять переход на box-shadow:



ch-info div необходимо preserve-3D для преобразования стиля, и мы дадим ему переход, так как этот элемент мы будем вращать в 3D:



Передняя и противоположная стороны будут иметь следующие общие стили:



Противоположная сторона будет поворачиваться так, что мы не увидим ее изначально:



И снова, Фоновые изображения:



... И типографские элементы:



При наведении, мы будем менять окна тени обертки и поворачивать родительные элементы и frontface так, что мы видим:



Пример 5



В этом примере мы хотим уменьшить внутреннюю част эскиза до 0 и заменить описанием элемента , появляющимся на затухании и его масштабировании до 1. Структур пятого пример будет такая же. как и в предыдущем примере (Пример 4)

Этот пункт имеет обычный стиль:



Оболочка из div описание и информация div будет иметь следующий общий стиль:



Давайте еще раз "hole" схитрим, установив тот же фон телу оболочки:



"front” и "back” общего стиля:



"Фронт" будет иметь переход (он будет уменьшаться и исчезать):



И обратно, будет содержать описание 0 непрозрачность изначально и будет расширена до 1.5:



Нам нужно установить указатель событий none, так как мы не хотим, чтобы элемент "блокировался"... Помните, это расширение, мы просто не видим его из-за непрозрачности, но он все еще там. :).
Фоновые изображения и типографские элементы, как обычно, только с несколько разными цветами:



при наведении мы уменьшаем часть эскизов до 0 и устанавливаем непрозрачность на 0. Это даст исчезновение на задней план:



Та часть, которая содержит описание будет сокращена до 1-го дюйма и исчезнет. Мы также установим указатель событий auto, как было раньше, потому что теперь мы хотим, иметь возможность нажать на ссылку:



Пример 6



В этом примере мы хотим перевернуть внутреннюю часть миниатюры вниз, чтобы увидеть описание. HTML будет таким же, как и в двух предыдущих примерах.

У элемента будет стиль, как и раньше:



Общий стиль обертки и описание элементов:



Оболочка будет иметь перспективу:



Элементу информации понадобятся следующие стлии преобразования:



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



Давайте установим правильные преобразования происходящие, так что мы сможем открыть его вниз:



Установим RGBA значение 0 нерпрозрачности на фоне описания элемента:



И обычный стиль для других элементов:



При наведении, мы будем вращать переднюю часть и немного анимировать тень окна. Задняя часть исчезнет в цвете фона:



Вот и все! Целая куча эффектов, которые позволяют много различных перспектив, попробуйте с ними по играть и может придумаете, что то получше!

Надеюсь, вам понравились эти эффекты и вы нашли в них вдохновение!