• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Воспроизведение CSS-анимации при наведении (Синхронизированное воспроизведение анимации - HTML, CSS)
Воспроизведение CSS-анимации при наведении
Kosten
Дата: Вторник, 2020-02-11, 23:35 | Сообщение 1
Онлайн
Администраторы
Сообщений:26047
Награды: 59


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

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



HTML

Код
<div class="agsekulas">
  <div class="dempasdam"></div>
  <div class="kudan">new!</div>
</div>

CSS

Код
.agsekulas {width:215; margin:auto;  z-index:1;}

.kudan {
  color: whitesmoke;
  text-align:center;
  font-family: 'Bree Serif', Courier, monospaced;
  font-size:3.5em;
  width:215px;
  position:absolute;
  margin:55px 0 0 2px;
  pointer-events: none;
}

.dempasdam {
  width:215px;
  height:215px;
  position:absolute;
  background: url(http://zornet.ru/ABVUN/Aba/sticker.png) top center no-repeat;
  animation: spin 10s linear infinite;
  animation-play-state: paused;
}

.dempasdam:hover {
  animation-play-state: running;
}

@keyframes spin {
  100% {transform: rotate(1turn); }
}

Также можно прописать на любой материал, который станет отображаться.

Демонстрация
Прикрепления: 9001007.png(13.4 Kb) · css-animation.zip(3.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Воспроизведение CSS-анимации при наведении (Синхронизированное воспроизведение анимации - HTML, CSS)
  • Страница 1 из 1
  • 1
Поиск: