Круг при наведении вокруг кнопки


Содержание

Как сделать — стиль круглые кнопки

Узнайте, как стиль круглые кнопки с CSS.

2px 4px 8px 12px 50%

Как стиль круглые кнопки

Шаг 1) добавить HTML:

Пример

Шаг 2) добавить CSS:

Добавьте скругленные углы к кнопке со border-radius свойством:

Пример

.button <
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
>

Перейдите на наш CSS кнопки учебник, чтобы узнать больше о том, как стиль кнопок.

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

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

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

10 простых эффектов при наведении без плагинов.

Приветствую вас, дорогие друзья!

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

1. CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

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

  1. 1. Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2. Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

box-shadow – данное CSS свойство отвечает за добавление тени. Более подробно об особенностях этого свойства и значении его параметров я писала в этой статье.

Далее для того, что бы эффект был более плавным, мы используем CSS-свойство transition. И здесь у нас указывается задержка в секундах, то есть, насколько плавно будет происходить смена CSS-эффектов.

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Как на CSS сделать светящийся круг с радиальным размытием?

Подскажите, как сделать круг с радиальным размытием?
Вот например в фотошопе можно поставить точку в 1 пиксел и вокруг нее сделать с помощью инструмента «обводка — градиент(из центра)» или «тень» любого размера размытый по радиусу круг.

В хтмл свойство box-shadow отталкивается от размеров элемента, то есть если элемент 0 на 0, то не совсем понятно, как сделать, чтобы элемент круглый при наведении из центра заполнялся цветом, который к краям круга тусклеет.

CSS hover эффекты — для картинок, кнопок, при наведении на ссылки, блоки и др.

Очень часто на сайтах вы могли встречать изменение оформления ссылок или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс :hover в CSS. Сегодня рассмотрим некоторые приемы верстки позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:

Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.

Hover эффект в CSS стилях добавляется справа от элемента следующим образом:

Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании горизонтального выпадающего меню.

Современные браузеры одинаково корректно воспринимают CSS hover эффект при наведении, хотя в старых версиях IE 6 и ниже он срабатывает исключительно для линков. Плюс в некоторых источниках говорилось, что этому браузеру обязательно нужно указывать в коде .

Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы :link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после :link и :visited, если они существуют.

Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.

Hover эффекты кнопок и ссылок

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

Простые примеры для кнопок

В данной статье приведены 8 базовых способов как можно оригинальным образом обыграть динамические hover эффект при наведении: добавление иконки, создания прозрачного фона, 3D преобразование, наклон и т.п. Все коды достаточно простые, вот один из них:

Необычный градиентный в кнопке

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

Sullivan Buttons

Фишка в том, что при наведении на разные кнопки кроме изменения цвета фона запускается также небольшая анимация с иконками (причем у каждой своя).

CSS Icons on Hover

Подборка из 5ти простых вариантов реализации задачи. Во всех случаях задействованы дополнительные иконки, которые появляются справа/слева от текста либо заменяют его.

Button Hover Effects

По сравнению с прошлым примером эти 12 функций срабатывания выглядят куда интереснее: как визуально, так и в плане кода. Не обошлось без JS.

Несколько фишек, которые позволяют сделать более необычные подчеркивания ссылок на CSS нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.

Info on Hover

Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.

Mana Button

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

Hover эффекты для изображений

15 базовых приемов

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

Красивые hover эффекты изображений

Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.

Barberpole Hover Animation

Не сложная на первый взгляд анимация, которая в итоге смотрится очень классно и нестандартно.

CSS hover эффекты с определением направления

Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com. Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:

Во многих сложных решениях Javascript и jQuery для hover эффектов позволяют значительно разнообразить и улучшить результат.

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Остальные фишки ищите в оригинальной статье.

Animatism

В этой разработке более 100 простых способов «анимации» изображений или объектов при наведении. С помощью данных функций сможете реализовать разное появление кнопок, заголовков, текстов, социальных иконок и т.п. Есть варианты с изменением отображения картинок, накладками полупрозрачного фона.

Caption Hover Effects

По ссылке находится 7 CSS3 hover эффектов заголовков — когда при наведении на изображение, пользователь увидит информационный блок с тайтлом, кратким описанием и ссылкой для перехода. Нельзя сказать, что примеры очень оригинальные, но они однозначно помогут разнообразить статичный контентный проект.

CSS Hover библиотеки

Hover.css

Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.

Imagehover.css

Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.

iHover

В проекте iHover более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.

Итого. Надеемся эти css hover эффекты при наведении на картинки, блоки, ссылки и другие элементы страницы помогли вам разобраться в данной теме. Самые удачные, на ваш, взгляд решения можете внедрить в своих сайтах — будь то подключение полноценной библиотеки или просто интеграция небольшого варианта кода.

Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.

8 простых CSS эффектов при наведении

Дата публикации: 2015-03-02

От автора: По мере того как с каждым релизом новых версий браузеров растет поддержка CSS3, а скучные браузеры, поддерживающие только CSS2, постепенно уходят со «сцены», у нас появляется гораздо больше вариантов для использования эффектов при наведении и переходов. Практически все кнопки призыва к действию (call-to-action), которые можно увидеть на веб-сайтах, используют в том или ином виде эффекты при наведении, потому что они привлекают внимание и делают веб-сайт более интересным.

В прошлом году я поделилась с вами набором из 8 простых переходов, которые поразят ваших пользователей, а сегодня мы рассмотрим еще 8 эффектов…

Начинаем

Как и раньше мы начнем с очень простого HTML, к которому мы затем будем применять эффекты:

CSS3 hover effects. Пошаговый туториал

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

Демо материалы лежат здесь.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:

Для большей части эффектов она останется неизменна, но кое-где нам придется внести ряд изменений. У нас есть div-контейнер с классом .effect, внутри которого помещаем картинку и контейнер с классом .caption, содержащий заголовок, описание и, как в данном случае, кнопку “View More”. Разумеется, структуру менять можно, главное, тогда сделать соответствующие изменения и для CSS-кода.

Дефолтные css-стили для нашей структуры (опять же, в зависимости от того, какой мы будем рассматривать эффект, они будут различаться):

Основы свойства transition. Эффекты #1.1-1.3

Эффект #1.1 заключается в том, что, при наведении мыши на изображение, сверху “выезжает” контейнер .caption с информацией.

Чтобы этого добиться, нужно, в первую очередь, переместить этот контейнер выше, за пределы контейнера с эффектом. Для этого мы изменим ему свойство top, и стили для блока теперь будут выглядеть так:

Следующим шагом будет добавление к .caption свойства transition. transition показывает, какое именно свойство будет изменяться, насколько быстро, с какой задержкой.

Рассмотрим его поподробнее. Вот так должно будет выглядеть свойство transition для эффекта #1.1:

transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;

Первое значение устанавливает имя стилевого свойства, которое будет отслеживаться для изменения. В данном случае мы выставили all — отслеживаться будут все свойства. Второе — отвечает за время, необходимое для анимации. Третье — за то, как в течение времени, заданного вторым свойством, будет распределяться скорость перехода: где замедлится, где ускорится. Так, например, в данном случае сначала анимация будет быстрее, к середине замедлится и ближе к концу выйдет на равномерную скорость. Четвертое значение определяет, начнется анимация с задержкой или нет. Если значение равно 0s — задержки нет.

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

-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Chrome и Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Firefox

В статье, для краткости, я буду опускать префиксы, но не забывайте добавлять их для таких свойств, как transition, transform и transform-origin. В коде примеров под кнопкой CSS (или в самих файлах) префиксы тоже есть.

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

Эффект #1.2 строится аналогично, только .caption “выезжает” справа налево. Для этого мы вносим незначительные изменения в стили .caption:

А вот в эффекте #1.3 внесены небольшие усложнения. Так .caption движется, как в эффекте #1.1 сверху вниз, но одновременно ему навстречу снизу вверх выдвигается еще один блок.

Чтобы добиться такого эффекта, внесем изменения в html-структуру. Нам необходимо создать пустой div-контейнер с классом .overlay для блока, выезжающего снизу вверх:

Внесем изменения в стили для .caption. Изменим его положение для выдвижения сверху вниз, уменьшим прозрачность вдвое, чтобы сохранить итоговое значение прозрачности фона (в конечном итоге, у нас будут накладываться друг на друга два блока), добавим z-index, чтобы показать, какой из двух блоков будет “выше” при наложении:

Добавим стили для .overlay.

Осталось только определить конечную точку трансформаций: .caption опускается до top: 0px, а .overlay, наоборот, поднимается до этого же значения:

Изменяем прозрачность. Добавляем движение отдельных элементов. Эффекты #2.1-#2.3

В эффекте #2.1 элементы выдвигаются из центра к краям. Воспользуемся базовой html-структурой, в которую, для создания этого эффекта, не понадобится вносить никаких изменений.

А вот в css-стили изменения внести понадобится. В первую очередь, необходимо сместить заголовок и кнопку в центр .caption, чтобы задать начальную точку для последующего перехода. Кроме того, необходимо добавить этим элементам свойство transition, поскольку сейчас именно они являются объектами анимирования:

Теперь, если мы зададим конечную точку анимации:

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

Добавляем прозрачность и transition к .caption:

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

Теперь на hover будет происходить следующее: прозрачность .caption и элементов внутри нее сменится с opacity: 0 на opacity: 1, одновременно с чем начнет меняться местоположение заголовка и кнопки:

Эффекты #2.2 и #2.3 построены аналогичным образом, только для эффекта #2.2 заголовок и кнопку мы смещаем сверху вниз и снизу вверх соответственно, а для эффекта #2.3 справа налево и слева направо соответственно.

Изменения, которые необходимо внести в код эффекта #2.1, чтобы получить эффект #2.2:

В остальном, все остается аналогичным.

Ну а чтобы из эффекта #2.1 получить эффект #2.3, изменим следующее:

Поговорим о transform и об увеличении/уменьшении элементов. Эффекты #3.1-#3.3

Эффект #3.1 строится на том, что, при наведении, появляются очень увеличенные элементы

html-структуру оставляем базовой. Что касается изменений в таблице стилей, уменьшающимся элементам мы должны добавить свойство transform. Transform позволяет трансформировать элементы: вращать, менять им размеры, наклонять, перемещать, комбинировать несколько свойств для создания более сложных эффектов. Для этих эффектов мы разберем уменьшение/увеличение элементов.

Необходимое для такой трансформации значение свойства transform — scale(x,y), где значение x — изменение размеров объекта по горизонтали, а y — по вертикали соответственно. Если мы применим это свойство для

Как видите, у значения scale в данном случае не два параметра, а один, и это означает, что и по горизонтали, и по вертикали наш элемент увеличен в два раза.

Теперь на hover наша задача уменьшить эти элементы до их нормального размера, что мы и делаем, добавляя эти стили:

Что касается .caption, как и в разборе эффектов #2.1-#2.3, мы выставляем ему opacity: 0 и очень маленькое время transition, чтобы появление подложки не отвлекало зрителя от основной анимации:

Эффект #3.2 строится аналогично предыдущему, с тем лишь исключением, что элементы не уменьшаются, а увеличиваются при наведении мыши. Выставим для них такое значение scale: 0.25, все прочие стили остаются аналогичны.

А вот эффект #3.3 — это комбинация из перемещения элементов и изменения их размеров. Как видим, элемент

остается на своем месте и размеры не меняет, для него стили остаются стандартные. Что касается


и , наша задача — переместить их наверх и вниз соответственно и уменьшить в размерах:

Теперь надо задать transition, но тут встает такой вопрос: элементы должны сначала — опуститься и лишь после — увеличиться в размерах, то есть, нужно задать transition для опускания элементов без задержки и transition с задержкой для увеличения.

Задать больше одного стилевого свойства для transition — просто: мы всего лишь перечисляем их через запятую, не забыв указать все параметры для каждого свойства:

transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;

Добавим это правило к остальным стилевым правилам:

Задаем конечную точку трансформаций:

Осталось только скрыть .caption по образу и подобию двух предыдущих эффектов:

Крутим элементы: rotate. Задаем “точку вращения”. Эффекты #4.1-#4.4

Чтобы “крутить” элементы, свойству transform необходимо задать значение — rotate и его параметры. Какие параметры есть у значения rotate? Во-первых, ось вращения: X, Y или Z. Во-вторых, количество градусов, на которое будет повернут элемент. Так, например, если мы хотим повернуть элемент по оси Y на 30 градусов, выглядеть правило будет следующим образом:

Эффекты #4.1-#4.3 построены на вращении элемента .caption вокруг каждой из трех осей, и начнем мы с эффекта #4.1, в котором .caption вращается вокруг оси X. Вот только само по себе вращение не так уж зрелищно, поэтому мы совместим его с изменением размера элемента.

html-структура остается базовой, равно как и стили для

Теперь при наведении мыши элемент крутанется на вышеобозначенное количество градусов. Но хотелось бы, чтобы он не только крутился, но и, в отсутствие hover, исчезал, а на hover не только вращался, но и “выплывал”. Для этого добавим еще один transform со значением scale. Чтобы добавить элементу два и более значений transform, не нужно писать правило дважды, мы просто ставим эти значения через пробел. И поступаем аналогично с hover-стилями:

Теперь .caption не просто вращается вокруг оси, но и словно появляется из глубины картинки.

Эффект #4.2 строится полностью аналогично, только заменяем ось вращения на Y.

Эффект #4.3 строится, опять же, полностью аналогично. Поскольку rotateZ() полностью аналогична записи rotate(), мы просто меняем стили на:

Эффект #4.4 сложнее. Он базируется не только на вращении и изменении размера, но еще и на изменении координат точки, вокруг которой совершается вращение, а также на усложненном значении параметра transition-timing-function свойства transition. Но начнем по порядку.

Суть в том, что вращение не может быть само по себе, оно всегда происходит относительно какой-либо точки. Дефолтные координаты этой точки — центр, то есть 50% 50%, но сейчас мы сменим их, чтобы изменить траекторию движения нашего .caption. Задаются координаты свойством transform-origin. Кроме того, давайте добавим transition со значением параметра transition-timing-function — linear:

Сейчас эффект выглядит, как очень медленное вращение .caption вокруг оси Z относительно очень смещенной точки вращения. Чтобы усложнить эффект, изменим значение transition-timing-function на cubic-bezier(0.68, -0.55, 0.27, 1.55), что даст нам очень ускоренный выход в анимацию, замедленную середину и небольшой возврат назад в конце. Вот так будет выглядеть окончательный код:

Еще немного о scale и transform-origin. Эффекты #5.1-#5.4

Как я уже писала в разборе эффектов #3.1-#3.3, мы можем применять scale не только по двум осям одновременно, увеличивая/уменьшая элемент одновременно в длину и ширину, но и по одной оси. Так, например, в эффекте #5.1 мы видим, как .caption разворачивается из центра по горизонтали, но высота его при этом не меняется.

Для этого элемента html-структура и стили для

И, чтобы произошло увеличение, на hover:

Эффект #5.2 строится аналогично, только .caption развернется по оси Y, в остальном стили останутся аналогичны предыдущему.

В эффекте #5.3 .caption тоже разворачивается по горизонтали, но не из центра, а от левого края. Чтобы подвинуть точку, от которой происходит переход, применим transform-origin, который, как видим, работает не только в связке с rotate:

Таким образом, мы смещаем точку, от которой происходит переход, по горизонтали в крайнее левое положение, а по вертикали она так и остается в дефолтном положении — по центру. Прочие стили остаются аналогичными.

Эффект #5.4 аналогичен эффекту #5.3, здесь .caption разворачивается сверху вниз, от верхнего края:

Точка смещена в крайнее верхнее положение, по горизонтали же — остается по центру. Прочие стили аналогичны.

Как еще можно использовать связку rotate и transform-origin. Эффекты #6.1-#6.3

В эффекте #6.1 при наведении мыши .caption проворачивается, как если бы был закреплен на невидимом гвоздике. Роль “гвоздика” выполняет transform-origin с заданными координатами, а поворот обеспечивает rotate.

html-структура остается базовой, равно как и стили для

Теперь .caption оказывается просто повернут вверх ногами. Пусть на hover он будет возвращаться в исходное положение:

Теперь, при наведении мыши, .caption просто прокручивается вокруг своей оси. Но, если мы изменим координаты точки, вокруг которой происходит переход, и, как в данном случае, перенесем ее наверх по вертикали таким образом:

Получится следующее: .caption сместится наверх, как если бы мы ему дали top: -100%; потому что сместилась точка, относительно которой он вращается.

Теперь, если мы будем смещать координаты “точки перехода” и изменять направление вращение, то сможем получить различные вариации этого эффекта. Так, например, эффект #6.2 почти полностью аналогичен предыдущему, только transform-origin: center bottom; а направление вращения изменено на противоположное благодаря тому, что исходное значение стало таким transform: rotate(-180deg);

В эффекте #6.3 направление вращения остается таким же, как в #6.2, а “точка перехода” смещена на середину правой стороны контейнера: transform-origin: right center; В остальном, стили остаются теми же самыми.

Поговорим подробнее о delay. Эффекты #7.1-#7.3

Сейчас мы немного нарушим порядок разбора эффектов и начнем с эффекта #7.2, потом перейдем к #7.3, и лишь потом вернемся к #7.1 как к самому сложному из линейки.

Итак, эффект #7.2: при наведении мыши сверху и снизу выезжают два контейнера .overlay и, когда смыкаются, сверху выезжает .caption.

html-структура понадобится такая:

Как видите, у нас добавилось два .overlay-слоя, тех самых, что будут выезжать сверху и снизу.

Что касается стилей: для

Теперь давайте рассмотрим стили для .overlay-контейнеров:

.overlay-top мы убрали вверх, .overlay-bottom — соответственно, вниз, теперь нам нужно, чтобы при наведении мыши они съезжались. Поскольку каждый из них имеет высоту, равную 50% высоты родителя, сделать это просто:

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

Давайте проверим, как это сработает. Какой выходит результат по шагам:

  1. Наводим мышь на .effect
  2. Выезжают .overlay
  3. Появляется .caption
  4. Снимаем hover
  5. .overlay возвращаются на свои места
  6. .caption, благодаря выставленному значению delay, возвращается на место на 0.3s позже, что совсем не входило в наши планы

Выходит, что delay, определенный для .caption, срабатывает, но не с тем результатом, с каким бы нам этого хотелось. Что тут можно сделать?

Мы можем задавать delay не только в стилях самого элемента, но и в стилях его поведения на hover, и в этом будет заключаться наш трюк. Как должны себя вести элементы на hover? Сначала выезжают .overlay и только потом .caption, это значит, что в состоянии hover у .overlay задержка равняется 0s, а у .caption — например, 0.3s

Но, когда мы снимаем hover, элементы возвращаются к своему обычному поведению, при котором сначала, без всякой задержки, на место возвращается .caption, а затем — .overlay, и, значит, у первого мы должны задержку отменить, а вторым — добавить:

Вот теперь очередность будет соблюдена, и элементы будут двигаться в правильном порядке.

Эффект #7.3 почти аналогичен предыдущему, разница лишь в стилях для .overlay:

С эффектом #7.1 придется повозиться чуть дольше. Как и #7.3, он отличается от #7.2 только положением и стилями для .overlay, выезжающими сверху справа и снизу слева двумя треугольниками.

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

Вот что важно: ширина и высота прямоугольников должна индивидуально подгоняться под размер вашего контейнера с эффектом, равно как и координаты, на которые мы их поместим (и на которые потом передвинем). Что мы делаем: берем наши прямоугольники, разворачиваем на 33 градуса каждый, верхний смещаем к верхнему правому углу контейнера .effect, нижний — к нижнему левому соответственно, а на hover смещаем их до соприкосновения по линии диагонали прямоугольника контейнера .effect:

Прочие стили идентичны стилям предыдущих эффектов.

Применяем полученные навыки на практике. Больше трюков! Эффекты #8.1-#10.3

Изюминку этих эффектов составляет bounce-эффект, строящийся на значении параметра transition-timing-function свойства transition для .overlay.

В данном случае .overlay понадобится всего один. Вот такие понадобятся для него стили:

Ну а на hover увеличиваем его:

Чтобы .caption не отвлекал, все, что мы пропишем для него — это изменение прозрачности:

Прочие стили остаются дефолтными.

Эффекты #8.2-#8.3 строятся аналогично. Вся разница лишь в том, что в #8.2 используется scaleX(), а в #8.3 — scaleY(), о которых я подробно рассказывала при разборе эффектов #3.1-#3.3

Эффект #9.1 строится на том, что два .overlay появляются по очереди из центра, а следом за ними с небольшим bounce-эффектом выезжает .caption.

Что касается html-структуры, она такова:

Поскольку .overlay-1 и .overlay-2 вступают в разное время, transition им дадим каждому — свой:

Соответственно, и при снятии hover исчезают они с задержкой относительно друг друга. Поэтому для .overlay-1 мы проставим delay: 0s, а для .overlay-2 — delay: 0.2s (подробнее о влиянии delay на очередность появления и исчезновения элементов я писала при разборе эффектов #7.1-#7.3)

Осталось рассмотреть стили .caption:

Эффект #9.2 строится аналогично, только .overlay круглые и .caption, как и .overlay, появляется из центра:

Прочие стили аналогичны стилям эффекта #9.1

Эффект #9.3 строится следующим образом. Нужна такая html-структура:

Чтобы добиться такого вида для .overlay, мы дадим ему постепенно увеличивающуюся box-shadow:

Изначальное положение для .caption будет: разворот на 180 градусов и opacity: 0. На hover разворачиваем .caption, который, в процессе поворота, становится непрозрачным:

Все остальные стили — дефолтные.

Эффект #10.1 состоит из пяти меняющих размер “лесенкой” элементов .overlay и, словно выныривающего, .caption.

html-структура нужна такая:

Сначала построим “лесенку”. Каждый .overlay отличается от другого своим местоположением и значением параметра delay:

На hover их delay тоже будут различаться:

Самое интересное и сложное здесь — .caption. Вот базовые стили для него:

Теперь нам нужно задать ему положение до начала анимации. Во-первых, развернуть, ведь, когда мы наводим мышь, мы видим, как .caption проворачивается на некоторый угол. Зададим и transform-origin, определяющий точку, вокруг которой будет проходить трансформация. Добавим transform: rotate(-50deg); и transform-origin: 0% 100%;. Следующим шагом будет смещение по вертикали и по горизонтали, чтобы чуть позже обеспечить “выныривание”. Смещать будем с помощью transform: translate(x,y), который сдвигает элемент по оси X и Y соответственно. Наша задача — сдвинуть .caption почти в самый угол по горизонтали и примерно на две трети за пределы контейнера .effects по вертикали:

Теперь нам нужно совсем скрыть .caption до тех пор, пока на контейнер с эффектом не наведут мышь. В этот раз мы спрячем с помощью height: 0px; и overflow: hidden;. Конечные стили такие:

Теперь, чтобы проявить .caption на hover, восстановим его высоту, повернем до rotate(0deg) и вернем на место по горизонтали и вертикали:

Эффект #10.2 строится на двух .overlay, выезжающих из верхнего левого и правого нижнего угла соответственно, а также на “выпадании” сверху элементов

html-структура нужна такая:

Начнем с левого верхнего .overlay, раскрывающегося полупрозрачной подложкой:

Интереснее с нижним правым. Поскольку ширина border равна 4px, просто задать ширине и высоте по 100% недостаточно, нужно компенсировать по 8px по вертикали и по горизонтали, чем нам и поможет calc:

Теперь перейдем к .caption и его содержимому. Для .caption стили остаются дефолтными, изменятся они для перемещаемых элементов

Осталось лишь, чтоб элементы опускались на hover, причем в установленном нами порядке:

Эффект #10.3 состоит из увеличивающейся картинки и изменения угла поворота .caption на hover.

html-структура нужна дефолтная, равно как и стили для

Ну а что касается .caption — задача в том, чтобы, развернув его на 30 градусов, совместить его правый нижний угол с правым нижним углом картинки и заставить исчезнуть с помощью понижения прозрачности. А его transition, состоит из двух частей:

  1. opacity должен измениться сразу же, как только наводим мышь, за очень короткое время. opacity 0.1s linear 0s
  2. для transform необходима задержка на величину времени, необходимого для п.1, и transition-timing-function, создающий иллюзию небольшого замаха: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s

Надеюсь, эта статья оказалась для вас полезной и интересной!

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53464c630c7a90bd • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Как сделать, чтобы кнопки увеличивались при наведении курсора?

23.05.2015, 20:30

Как сделать чтоб фон меняелся при наведении курсора?
есть таблица, фоном ячейки которой есть изображение 1, как сделать чтоб при наведении курсора мыши.

Как сделать, чтобы при наведении на элемент раскрывалось меню?
Доброго Времени Суток Друзья!Помогите, пожалуйста. Весь мозг себе сломал — и ничего не выходит. .

Как сделать так чтобы при наведении мышки на ссылку div менялось изображение при использовании z-index
Здравствуйте, уважаемые участники форума! Подскажите мне, пожалуйста, как сделать так чтобы кнопка.

Как сделать, чтобы при наведении на пункт меню двигалась стрелка
Здравствуйте! Подскажите пожалуйста, как сделать такое меню, чтобы при нажатии на пункт меню.

Animation на CSS

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

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

See the Pen BmqQoX by Denis (@Dwstroy) on CodePen.

Что бы не тратить ваше время я подготовил архив, в нем находится index файл с подключением css , в CSS прописаны две строчки, установил шрифт и подключил картинку на задний фон, которая находится в папке img .

Делаем каркас анимированной кнопки

Открываем index и опишем каркас кнопки. Между тегами body вставляем блок с классом . dws у которого основное назначение отцентровать кнопку посередине экрана. Затем следует кнопка с классом .pulse , в ней вложим два блока, первый блок с классом .phone разместим в нем иконку, и следующий для текста с класс .text .

Пропишем текст «Кнопка связи», и перейдем на сайт fontawesome.io .

Отберем иконку, копируем ее код и вставляем в отведенном блоке c классом .phone .

Далее, что бы она отобразилась, подключим дополнительный файл bootstrapcdn.com .

На этом, с файлом index пока работы закончены, переходим к описанию стилей.

Описываем стили общей структуры кнопки

Отобразим границы пульсирующего блока при помощи outline в 1 пик., зададим размеры блоку в 90 пик. Текст с иконкой делаем белым цветом, центруем его по середине, добавляем цвет фона, а при помощи border-radius в 50% делаем закругление.

Для удобства все с позиционируем по центру экрана.

Скроем текст, что бы он не мешал.

Оформляем иконку в CSS

Позиционируем иконку абсолютно блоку, для этого блоку .pulse добавим position:relative , а классу .phone position:absolute . Отобразим границы блока outline:1px solid #51ff1b , увеличим иконку до 50 пик, делаем ее посередине, прописываем размеры блока и выравниваем по вертикали.

Пока скроем данный блок opacity: 0; , и оформим текст.

Позиционируем текст абсолютно блоку, выделим границы outline , делаем заглавными буквами, увеличим жирность, центруем по вертикали, размер шрифта делаем в 15 пик.

Следующей задачей, создаем анимацию при наведении.

Описываем анимацию и пульсирующий эффект кнопки

При помощи трансформации transform: scaleX(-1) отобразим текст зеркально по оси Х, используя псевдокласс hover вернем его в начальное положение transform: scaleX(1) . Добавляем анимацию при наведении, и анимацию в момент когда убираем курсор мыши transition:.5s ease-in-out .

Затем остается элемент в начальном положение скрывать, а при наведении его отображаем.

Приступим к анимации телефона. Отображаем иконку, пишем animation , устанавливаем кадр и задаем время анимации в 0.9 сек. Прописываем свойство ease-in-out , что бы анимация медленно начиналась и также заканчивалась, при помощи infinite делаем проигрывания анимации бесконечно.

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

При наведении, задействуем трансформацию, уменьшаем элемент иконки в ноль, скрываем его при помощи opacity , задействуем transition в 0.5s для плавного исчезновения.

А для того чтобы она также плавно появлялась, прописываем для элемента иконки transition в 0.5s.

Убираем обводки outline , которые задавали ранее, и приступим к описанию пульсирующего элемента.

Описываем Анимацию пульсирующего элемента

Создаем псевдоэлемент ::before , пишем content , позиционируем его абсолютно, припишем border в 1 пик. задаем координаты по отношению круга, закругляем, и прописываем анимацию кадра.

Задаем название кадра pulse , делаем его в 1.8s, задаем равномерность анимации на протяжении всего времени, и зацикливаем.

Ниже описываем кадр самой анимации.

Добавляем еще один псевдоэлемент .pulse:hover::after , с такими же значениями и для того что бы его отобразить, отдельно для любого из псевдоэлемента ::after задаем задержку в пол секунды.

Для того что бы они срабатывали по наведению делаем событие :hover и в начальном положении делаем элементы не видимыми.

В принципе кнопка готова, можно также добавить дополнительно блок для курсора, по нажатию на который будем выполнять какие-то действия.

В css, опишем классу .bloc стили, но для начала сгруппируем повторяющие элементы.

Добавим изменения основного фона кнопки на более темнее

Делаем плавность ее появления.

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

Используйте, внедряйте знания, которые приобрели, и обязательно в комментариях делитесь своими примерами, что у вас получилось.

Урок подготовил Горелов Денис, до встречи в следующих видео по CSS.

Оставить комментарий:

Отзывы

Спасибо большое за очень полезную информацию.
Но в вашей бочке меда есть ложка меда. т.к. нет примера подключения возможности перехода по гиперссылке на нужную страницу по событию клика левой клавиши мышки.

Илон Маск рекомендует:  Что такое код odbc_procedures
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL