8 прости CSS3 ефекта, които ще впечатлят вашите потребители
Само няколко реда код ще ви дадат невероятни ефекти на прехода, които ще развълнуват вашите потребители, ще увеличат ангажираността и в крайна сметка, ако се използват правилно, ще увеличат трафика ви. Нещо повече, тези ефекти използват хардуерно ускорение, което е напредък - в който можете да участвате точно сега.
Ето 8 наистина прости ефекта, които ще вдъхнат живот на вашия UI (потребителски интерфейс) и ще усмихнат лицата на вашите потребители.
Всички тези ефекти (един правоъгълник) се контролират от свойството за преход. За да видим как работят тези ефекти, създадохме div в HTML страницата:
След като сте готови, задайте неговата ширина и височина (за да има размери), цвета на фона (за да можем да го видим) и неговите свойства на ефекта.
Свойството за преход има три стойности: свойство за преход (в нашия случай всичките), скорост на преход (в нашия случай 0,3 секунди) и трета стойност, която ви позволява да промените начина на изчисляване на ускорението и забавянето, но ние ще се придържаме към настройките по подразбиране, оставяйки това поле празно.
Сега всичко, което трябва да направим, е да променим свойствата и те ще създадат анимацията за нас.
Ако искате да продължите сами, демо файловете са тук за вас.
1. Затъмняване
Създаването на затъмняващи ефекти е доста често срещано искане от клиенти. Това е чудесен начин да подчертаете функционалността или да привлечете вниманието към призив за действие.
Ефектът се кодира в две стъпки: първо, задавате първоначалното състояние; след това задайте промяната, например при задържане на мишката:
(Уверете се, че сте дали на вашия div класа "fade", за да видите как работи това.)
2. Промяна на цвета
Преди това анимацията за промяна на цвета беше невероятнасложен бизнес, включващ математиката, участваща в изчисляването на отделните RGB стойности и след това повторното им комбиниране. Сега просто задаваме класа на div на "color" и задаваме цвета, който искаме в CSS:
3. Увеличете и намалете
Имало едно време, за да направите елемент по-голям, трябваше да използвате неговата ширина и височина или параметъра padding. Но засега можем да използваме CSS3 transform, за да го направим по-голям.
Задайте класа на div на "grow" и след това добавете този код към стила на вашия блок:
Свиването на елемент е толкова просто, колкото разширяването му. За да увеличим даден елемент, посочваме стойност, по-голяма от 1; за да го намалим, посочваме стойност, по-малка от 1:
4. Усукващи елементи
CSS предоставя редица трансформации, а една от най-добрите е усукването на елементи. Дайте на вашия div класа "rotate" и добавете следните редове към вашия CSS:
Codeby web-security - нов курс от Codeby Security School
Представяме на вашето внимание нов курс от екипа наThe Codeby - "Тестване за проникване на уеб приложения от нулата".Обща теория, подготовка на работната среда, пасивен фузинг и пръстови отпечатъци, активен фузинг, уязвимости, последваща експлоатация, инструменти, социално инженерство и още.Прочетете повече .
5. Превръщане на квадрат в кръг
Сега ефектът от трансформирането на квадратен елемент в кръгъл и обратно е много популярен. С CSS това се постига лесно, ние просто прехвърляме свойството border-radius. Просто използваме свойството border-radius.
Дайте на вашия div класа "circle" и добавете тези редове към вашите таблици със стилове:
3D сенките бяха недоволни в продължение на около година, защото не се вписваха в плоския дизайн, разбирате ли.това разбира се са глупости, те работят фантастично добре, давайки на потребителя усещане за ангажираност както при работа с плосък дизайн, така и с псевдо 3D интерфейс.
Този ефект се постига чрез добавяне на правоъгълник в сянка и след това преместване на елемента по оста x чрез промяна на свойствата за трансформация и превод, така че да изглежда, че елементът расте извън екрана.
Дайте на вашия div класа "threed" и след това добавете следния код към вашия CSS:
Не всички елементи използват свойството за преход. Можем също да създаваме много сложни анимации, използвайки @keyframes, анимации и итерации на анимация.
В този случай първо ще дефинираме CSS анимации в стилове. Ще забележите, че поради проблеми с внедряването трябва да използваме @-webkit-keyframes, както и @keyframes (да, Internet Explorer всъщност е по-добър от Chrome, поне в това отношение).
8. Поставете рамка
Един от най-горещите стилове на бутони в момента е бутонът призрак; бутон без фон и дебела рамка. Разбира се, можем просто да добавим рамка към елемент, но това ще промени позицията на елемента. Можем да решим този проблем с размерите на кутията, но много по-просто решение е да преминем към границата чрез вмъкване на сянка.
Дайте на вашия случай класа "border" и добавете следния CSS за вашите стилове:
Параноид - курс от Codeby Security School
Представяме на вашето внимание курса от екипаcodeby - "Комплекс от мерки за защита на личните данни, анонимност в интернет и не само" Още .