• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Сделать плавную анимацию на HTML + CSS (Плавная анимация перемещения на HTML и CSS)
Сделать плавную анимацию на HTML + CSS
Kosten
Дата: Среда, 2019-07-24, 17:10 | Сообщение 1
Оффлайн
Администраторы
Сообщений:24964
Награды: 57


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

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

Также рекомендую посмотреть похожею анимацию, но там больше задействовано различных элементов под дизайн.

HTML

Код
<div class="floating"
     style="height: 43px; width: 43px; background: rgb(86, 80, 80); border-radius: 100px; border: 2px solid #c4c7cc;">
</div>

CSS

Код
.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

Вы можете создать текстовый редактор и браузер для тестирования, но я предпочитаю использовать такой инструмент, как jsfiddle или codepen.

Демонстрация
Прикрепления: dsazab.zip(2.5 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2019-07-26, 12:15 | Сообщение 2
Оффлайн
Администраторы
Сообщений:24964
Награды: 57


Если вам требуется простая анимация, где при наведение картинки клика, по сторонам внахлест идет цветовая гамма, то это интересный эффект, что смотрится оригинально.

Прикрепления: 6557786.jpg(23.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Сделать плавную анимацию на HTML + CSS (Плавная анимация перемещения на HTML и CSS)
  • Страница 1 из 1
  • 1
Поиск: