Если вам нравится анимация, а здесь мы ее создаем при наведение на объект, это может быть картинка или кнопки, что воспроизодиться на чистом 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); }
}
Также можно прописать на любой материал, который станет отображаться.
Демонстрация
