• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Эффект поворота при наведение курсора на CSS (Анимация ::before и ::after на transform и другого элемента)
Эффект поворота при наведение курсора на CSS
Kosten
Воскресенье, 19 Августа 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Простая анимация поворота, которая будет происходить при наведение клика, но все больше можно ее заметить на веб сайтах. Безусловно она популярна, так как можно самостоятельно выставить скорость, где не нужно исключать стилистику дизайна. Вы можете перемещать и поворачивать трансформируя элемент, чтобы изменить положение и направление анимационного клипа.

Фактически, каждый слой имеет свою собственную трансформирующую позицию, где по умолчанию выставляет все корректно, но при клике все автоматически срабатывает, и сама анимация появляется по заданной в стилистике 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)
Форум » Web-Раздел » Начинающему вебмастеру » Эффект поворота при наведение курсора на CSS (Анимация ::before и ::after на transform и другого элемента)
  • Страница 1 из 1
  • 1
Поиск: