Как сделать анимацию при наведении курсора css

Анимация меню при помощи CSS3

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

Значки, используемые в демо, является шрифтом Web symbols. Шрифт создан студией Just Be Nice.

HTML-разметка

HTML-структура меню будет представлять собой неупорядоченный список, где каждый элемент является ссылкой, который в свою очередь включает в себя span с иконкой и div с основным и вторичным названием:

< ul class ="ca-menu" >
< li >
< a href ="#" >
< span class ="ca-icon" > A </ span >
< div class ="ca-content" >
< h2 class ="ca-main" > Статьи </ h2 >
< h3 class ="ca-sub" > Статьи о вебразработке </ h3 >
</ div >
</ a >
</ li >
.
</ ul >

* This source code was highlighted with Source Code Highlighter .

Так как мы используем шрифт для иконок, мы будем писать соответствующую букву для иконки.

В общих стилях для всех примеров будет подключение символьного шрифта:

Путь к файлам является относительным по отношению к файлу CSS, следовательно, они будут находиться в папке css/websymbols /.

Большое преимущество использования символьного шрифта в том, что мы можем применить различные красивые эффекты к нему, например, текст с тенью. Мы также можем растягивать его для наших нужд.

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

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

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

Пример 1

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

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

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

Ссылка элемента будет иметь следующий стиль:

Давайте определим стиль для отдельных элементов. Span иконки будет иметь следующий стиль:

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

Враппер для элементов контента будет иметь следующий стиль:

Содержание элементов будет варьироваться в зависимости от их размера шрифта и будет иметь линейный переход:

И теперь самая интересная часть. При наведении на элемент списка мы будем менять размеры шрифта и цвет:

Так как мы определили переход для каждого из этих элементов, изменения будут «анимированные».

Пример 2

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

Давайте определим две анимации. Первая начнется с вставки соответствующего элемента на 200% вниз по оси Y, что означает, что он будет сдвинут вниз. Кроме того, он будет иметь прозрачность 0. Затем он будет анимирован изменяя translateY до 0%:

Вторая анимация будет двигать элемент сверху по тем же принципам:

Пример 3

В этом примере мы хотим изменить фон и цвет текста при наведении курсора. Мы также будем поворачивать и увеличить иконку. Это мы можем сделать при помощи transition и за счет увеличения размера шрифта иконки:

Пример 4

Примеры с 4 до 8 будут использовать другой макет для меню. Элементы будут располагаться рядом друг с другом:

Иконка будет размещена на верхней части, в центре пункта:

Враппер содержания будет размещен на нижней части элемента:

Основной и вторичный заголовок будут иметь следующий стиль:

При наведении мы размоем значок, изменим цвет фона и сдвинем элементы содержимого сверху и снизу:

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

Анимация будет такой же, как та, которую мы использовали в одном из предыдущих примеров, за исключением перевода значений для анимации moveFromTop. Здесь мы установим translateY до -300%.

Пример 5

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

Анимацию moveFromBottom мы уже знаем, давайте взглянем на moveFromLeft, которая передвигает соответствующий элемент влево, установив translateX до -100%, а затем перемещает его обратно в исходное положение:

В анимации moveFromRight мы установим translateX (100%) на начальном этапе.

Пример 6

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

Анимация moveFromLeftRotate будет перемещать пункт и поворачивать его:

Пример 7

В этом примере мы установим второстепенное название в нижнюю часть элемента:

Мы хотим, чтобы название скользило снизу и также изменить цвет его фона. Иконка будет выезжать снизу, в то время как основное название будет увеличиваться:

Анимация smallToBig является примером того, как использовать трансформацию:

Пример 8

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

У нас также есть специальный span с иконкой ID #heart. Этот span будет красным и при наведении мы будем использовать анимацию smallToBig особым образом: мы будем бесконечно чередовать анимацию, создавая эффект бьющегося сердца.

Пример 9

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

Для того чтобы создать круг нам нужно установить border-radius до половины внешней ширины/высоты элемента.

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

Пункт будет поворачиваться на 360 градусов и основное название исчезнет, позволяя вторичному названию появится (его прозрачность было первоначально установлено в 0).

Пример 10

В последнем примере, элементы списка будут иметь левое поле -48px. Это позволит сделать перекрытия. Затем при наведении, мы будем масштабировать их и повышать z-индекс, так что активный пункт будет сверху:

И вот и всё! Надеюсь, вам понравилось эти маленькие эксперименты и найдете их полезными!
Пожалуйста, обратите внимание, что эта анимация и переходы будут работать только в последних версиях действительно современных веб-браузеров, такие как Google Chrome, Apple Safari, Opera и Mozilla Firefox.

CSS анимация при наведении курсора

Мне нужна небольшая помощь с анимацией CSS. Как я могу сделать это http://jsfiddle.net/nmsdvid/TdnVs/ только с CSS. Итак, когда я наведу курсор мыши на krab div, начнется анимация css и будет переключать изображения (vws02.png, чем vws01.png, чем vws02.png), пока я нахожусь в режиме наведения.

2 ответа

Как я могу заставить hover() работать непрерывно? Мне бы хотелось, чтобы при наведении курсора мыши на #up_btn свойство top продолжало анимироваться. Прямо сейчас, она выполняется только один раз. $(document).ready(function()< $(#up_btn).hover(function()< var new_num =.

Как запустить анимацию css при загрузке страницы и запустить ту же анимацию на том же элементе при наведении курсора. При загрузке страницы анимация будет повторяться 1 раз. Как только он остановится,я смогу вызвать его повторно с помощью наведения. Я попытался переработать код в разных анимациях.

Пример krab, который вы привели, выполнен только с css. При наведении на изображение они только что изменили форму изображения http://nmsdvid.com/images/vws01.png на http://nmsdvid.com/images/gif.gif . Если вы видите, что второе изображение уже является изображением .gif(анимированное изображение).

Похожие вопросы:

Надеюсь, кто-нибудь сможет мне в этом помочь. Я хочу использовать один из переходов значка гамбургера из http://callmenick.com/post/animating-css-only-hamburger-menu-icons jquery для перехода значка.

Я хотел бы сделать эффект с css3 при наведении курсора. У меня есть одна кнопка, Пусть говорят AB, когда мышь наведена на нее. Он должен расширяться, скажем, A становится ALL, А B становится BALL с.

Я пытаюсь анимировать div при наведении курсора, используя правило CSS3 @keyframes. Код анимации находится в самом низу этой страницы (сразу после щедро отмеченного комментария HERE BE ANIMATION.

Как я могу заставить hover() работать непрерывно? Мне бы хотелось, чтобы при наведении курсора мыши на #up_btn свойство top продолжало анимироваться. Прямо сейчас, она выполняется только один раз.

Как запустить анимацию css при загрузке страницы и запустить ту же анимацию на том же элементе при наведении курсора. При загрузке страницы анимация будет повторяться 1 раз. Как только он.

Есть ли способ с помощью CSS сделать контейнер похожим: #p-container .p-categories-item повлиять на изображения в этом div? У меня есть анимация CSS на изображениях, но я бы хотел, чтобы она.

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

У меня возникла проблема с моим шатром CSS, в котором изображения перемещаются справа налево. Прямо сейчас анимация приостанавливается, когда я навожу курсор в любом месте внутри SPAN, пустой.

У меня есть анимация кнопки css, где она обводит линию вокруг кнопки, и я хочу, чтобы при наведении на нее курсора она остановила конечную точку, но продолжала начальную точку до тех пор, пока не.

Я хочу получить простую анимацию при наведении курсора в css, но при наведении курсора анимация прыгает и выглядит глупо. Есть ли способ избежать этого? Я бы хотел, чтобы он коллапсировал так же.

CSS3 анимация при наведении курсора мыши

И назначил класс "bounce" кнопке на моей странице. Когда я наведу на него курсор мыши, он будет иметь приятную небольшую анимацию отскока, но когда я наведу на него курсор снова, он не будет играть. Что я могу сделать, чтобы он подпрыгивал каждый раз, когда я наведу на него курсор мыши?

3 ответа

Я пытаюсь запустить анимацию только тогда, когда мышь находится над объектом. Я могу получить одну итерацию анимации, а затем вернуть ее в нормальное состояние при выходе мыши. Но я бы хотел, чтобы анимация зацикливалась на наведении курсора мыши. Как бы я это сделал, используя setInterval? Я.

Вместо изменения animation-play-state добавьте эффект анимации при наведении курсора.

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

Установите для свойства css animation-iteration-count: значение бесконечное

animation-iteration-count: 1; используя эту строку кода, при наведении на кнопку анимация будет воспроизводиться только один раз и не более.

сделайте свой animation-iteration-count: 1; к этому animation-iteration-count: infinite;

выглядит вот так.

Похожие вопросы:

У меня есть анимация коробки, где ее ширина увеличивается при наведении курсора мыши: JSFiddle: https://jsfiddle.net/hbpncv34/ HTML: <div></div> CSS: div < background-color: red; height.

Я хотел бы сделать эффект с css3 при наведении курсора. У меня есть одна кнопка, Пусть говорят AB, когда мышь наведена на нее. Он должен расширяться, скажем, A становится ALL, А B становится BALL с.

Я пытаюсь анимировать div при наведении курсора, используя правило CSS3 @keyframes. Код анимации находится в самом низу этой страницы (сразу после щедро отмеченного комментария HERE BE ANIMATION.

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

У меня есть небольшая анимация jQuery, которая исчезает в ссылке при наведении курсора мыши. : $(function() < $(‘.delete’).hide(); $(‘#photos img’).hover(function() <.

Как я могу вызвать CSS3 anmation через событие javascript при наведении курсора, а не при наведении курсора на событие CSS :hover ? $(.panel’).on(‘mouseover’, function< //foo >); Вот пример анимации.

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

Я пытаюсь анимировать изображение влево и вправо при наведении курсора мыши, а при наведении курсора мыши оно вернется в предыдущее состояние. Например, если исходная ширина изображения составляет.

Привет, ребята, я хочу сделать меню, похожее на этот сайт: http://tommasoraspo.com/creativepartners/DesignLovers/index.html Но я не знаю, как бы я анимировал закладку, чтобы она отображалась при.

Пожалуйста, смотрите код ниже для простой анимации ключевого кадра при наведении курсора мыши. .behind < width: 200px; height: 200px; background: red; position: absolute; >.infront < width: 200px;.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *