Создать вращение элемента при наведение CSS
 | |
| Безусловно вращение элемента привлекает пользователей на сайте. Вы можете поставить как на социальные кнопки так другие элементы. Сам элемент вращение очень необычен и смотрится оригинально и конечно он будет заметен. Вы теперь сможете его установить на свой портал на любой элемент и он будет делать круг на 180 градусов при наведение клика. Здесь все будет на чистом стиле и не будет использоваться javascript как это делают остальные или многие. Также некоторые подцепляют дополнительные плагины, что грузит сайт, но как поняли в нашем случай все очень просто. Чтоб все получилось и работало корректно, здесь нужны два параметра CSS. transition - Отвечает за время анимации, а точнее прокрутки. transform - Вот это параметр, как раз будет задавать анимацию и отвечать за само вращение изображение или иконки. Теперь осталось найти тот элемент, который будем подключать и нам нужно в него поставить один класс, который и задаст этот эффект. Код class="block" Теперь идем в стили CSS и пропишем: Код .block{float:left;width:32px;height:32px;margin-right:5px;-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .block:hover{-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);} Как пример проверки, просто перешел на "Добавить материал" и подключил Панель HTML кодов и просто загрузил логотип, у всех будет так, кроме ссылки. Код <img border="0" align="absmiddle" src="http://zornet.ru/Aben/Abryn/95881948.png"> Потом добавил класс block и получилось так: Код <img border="0" align="absmiddle" class="block" src="http://zornet.ru/Aben/Abryn/95881948.png"> И все при наведение произошло вращение. Это к чему? Если у вас на сайте стоит логотип или небольшая картинка дизайн, то просто добавляем класс=block и все будет работать. Давайте разберем значение и за что они отвечают. Если брать это значение 0.8s которое в стилях прописано. То будет отвечать за секунды, значит за такое время произойдет вращение, здесь вы сами можете задать. Но и второе, тоже значительное, это 360deg - что отвечает за градусы, на сколько поворот будет, здесь как видим полный оборот. Если вам нужно, чтоб только пошевелился и встало на свое место, то просто уменьшаем. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
