• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект поворота при наведение курсора на CSS (Анимация ::before и ::after на transform и другого элемента)
Эффект поворота при наведение курсора на CSS
Kosten
Дата: Воскресенье, 2018-08-19, 21:12 | Сообщение 1
Администраторы
Сообщений:18489
Награды: 55


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

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



HTML

Код
<div class="dingaprovides rigunstea" style="    border-color: #e21515;">ZORNET.RU #3</div>


CSS

Код
.dingaprovides {
    float: left;
    margin: 5em 3em;
    width: 100px;
    height: 59.8px;
    border: 1px solid green;
    background-color: #fff;
    line-height: 60px;
    text-align: center;
}

.dingaprovides.rigunstea:hover {
    cursor: pointer;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.dingaprovides {
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}


Демонстрация
Прикрепления: 7675119.png(6.0 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект поворота при наведение курсора на CSS (Анимация ::before и ::after на transform и другого элемента)
  • Страница 1 из 1
  • 1
Поиск: