Gravity - също е настроението: мрачно, страшно и мрачно или ярки, очарователен и весел. С участието на тези видове движение с помощта на CSS, ние можем да съживи нашите сайтове интерфейси интересна анимация. Един прост пример е подскачащи топката. Нейната мобилност може да се използва, за да привлече вниманието на потребителя е да едно много важно послание. Маркировката се състои от един елемент DIV, който е проектиран по такъв начин, че да може да прилича на недвижими топка:

И сега ние добавяме CSS, задаване на движението за топката. Някои стойности са били привлечени от работата на Алби Браун (Brown Олби). За по-голяма яснота, стил води без версията продавач на представки:

Използвам единица фолксвагена и VH, за да определите размера на топката и нейното движение, така че е напълно отзивчив решение за съвременни браузъри, без да е необходимо за медийни заявки. Обадете се на анимацията за топката:

Обърнете внимание на промяната в стойността на имотите на трансформиране на произход, от който става по-лесно да се позиционира елемент (особено ако тя отскача от друг обект), и е по-лесно да добавите нотка на реализъм, което ние ще направим в следващата стъпка.

Практически курс по адаптивно оформление Кацане от нулата!

Научете от нулата да наложи адаптивна Кацане на HTML5 и CSS3 за следващите 6 дни

Сама по себе си тази анимация създава илюзията за гравитацията, но това не е пълен ефект: мека обект, като гумена топка ще се притиска леко, когато падне на земята и участък (за възстановяване на формата на) отскок. Американската аниматор Уолт Дисни каза, че такова движение, т.е. компресия и напрежение, е "най-важният принцип в анимацията". Художници използват този принцип да даде своите герои и предмети на повече живот и реализъм. Това може лесно да се направи с помощта на CSS. Трябва да добавите функция за мащабиране свойства трансформират, което вече присъства в нашата анимация:

Степента, в която ще се променят настройките за компресиране и напрежение, отчасти зависи от самия обект и отчасти от стила на анимация: някои аниме, например, могат да се определят граници. Разбира се, тази анимация е друг нереалистично особеност е, че тя продължава вечно. В бъдеще, аз ще ви кажа как да добавите естествен разпад за вашите движещи се графики в CSS.

Вижте демонстрация пример за това въздействие върху CodePen

Редакция: Екип webformyself.

Най-IT новини и уеб разработки на нашия канал Телеграма