• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект анимации Transformation с помощью CSS (Создание Анимации ваших трансформ при помощи CSS)
Эффект анимации Transformation с помощью CSS
Kosten
Дата: Воскресенье, 2018-08-19, 20:36 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


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



HTML

Код
<div class="tanimate-lements standareading">ZORNET.RU</div>


CSS

Код
.tanimate-lements {
    float: left;
    margin: 3em 2em;
    width: 100px;
    height: 59px;
    border: 1.8px solid green;
    background-color: #fff;
    line-height: 59px;
    text-align: center;
    cursor:pointer;
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    transition: 2s ease-in-out;
  }
  .tanimate-lements.standareading:hover {
    -webkit-transform: translate(5em,0);
    -moz-transform: translate(5em,0);
    -o-transform: translate(5em,0);
    -ms-transform: translate(5em,0);
    transform: translate(5em,0);
  }


В следующем примере окно слева начинается как маленькое и зеленое с квадратными углами, а справа - больше, с красной рамкой и закругленными углами. Наведение курсора на любой из ящиков вызовет анимацию, в результате которой коробка 1 примет вид коробки 2 и наоборот.

Демонстрация
Прикрепления: 4788918.png(1.7 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Эффект анимации Transformation с помощью CSS (Создание Анимации ваших трансформ при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: