Всім привіт. Щоб додати трохи інтерактивності або точніше живності елементів на сторінці сайту у сучасному веб-просторі частенько використовуються різні анімаційні ефекти.
У даній замітці ми розглянемо один з таких прикладів. Використання подібного ефекту швидше за все вам вже доводилося спостерігати – при наведенні курсору миші елемент починає обертатися.
За допомогою використання transition і transform в CSS3 реалізувати подібний ефект досить просто, давайте розглянемо, як це робиться. В якості самого елемента ми будемо використовувати зображення. Насамперед слід розмістити зображення в тілі документа сторінки:
Після цього, самі ефекти ми прописуємо в CSS:
img {
border-radius: 50%;
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
Властивість transition є унікальним, і дозволяє встановлювати ефект переходу між двома станами елемента, які в даному прикладі визначені у вигляді псевдоэлемента :hover (наведення курсору на елемент). Цикл обертання задається за допомогою «rotate» де вказується величина в градусах, тобто 360 градусів (повний оборот). Швидкість обертання елемента задано в стилях елемента img – зверніть увагу на значення «.8s», змінюючи значення ви можете налаштувати потрібну вам швидкість анімації.
Приклад демонстрації
До речі, можна змусити обертатися елемент нескінченно, без впливу користувача. Як зробити нескінченну анімацію обертання на CSS читайте в цій статті.
Додав: htmaker, 05.08.2018 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Анімація набору тексту на JQuery плагіні — TypeIt
Рубрика: Html, CSS, Javascript
