Анимация в CSS3, когато задържите примери 9 - индиго блог

Това е невероятно колко прости неща могат да оживяват обикновен уеб страница, за да стане по-достъпен за работата на потребителите. Ние говорим за CSS3 преходи, можете да използвате, за да се даде възможност на елемента да се трансформира и промените стила, например, когато курсора. Девет примери CSS3 анимации са на разположение по-долу, ще ви помогнат да се създаде атмосфера на отзивчивостта на сайта, както и подобряване на цялостния облик на страницата, благодарение на приятно плавен преход.

За по-подробна информация можете да изтеглите архива.

1. Промяна на цвета, когато задържите

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

2. вид на рамката

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

Това CSS анимация - .. Изключение, че е за преход на имота не се използва. Вместо това ние използвахме:

• @keyframes - основна директива за създаване на CSS изтича анимация, която ви позволява да направите т.нар .. сториборд и анимация, за да опише списък на ключови точки;
• анимация и анимация, повторение преброяване - свойства, за да зададете анимация параметри (дължина и скорост) и броят на циклите (пъти). В нашия случай 1 се повтаря.

4. затихване

изглаждане на амортисьорите ефект - тя е в действителност, обичайната промяна в прозрачността на елемента. Анимация е създаден в два етапа: първо, трябва да инсталирате първоначалното състояние на прозрачност 1 - това е напълно непрозрачен и след това определете стойността си, когато задържите - 0.6:

За обратния резултат и промените стойностите на някои места:

5. Увеличаване

За да задържите единица се увеличава, ние ще използваме трансформира имуществото и да го помоли смисъла на скала (1.2). В този случай, устройството ще се увеличи с 20 процента, като се поддържа своите размери:

6. Намалете

Zoom т толкова лесно, колкото увеличението. Ако в пети параграф, за да увеличите трябваше да посочите стойност по-голяма от 1, за да се намали блок ние просто посочите стойност, която е по-малко от един, например, мащаб (0.7). Сега, когато устройството на мишката ще бъде пропорционално намалена от 30 на сто от първоначалния си размер:

7. Превръщане на кръг

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

8. Rotation

Забавен изпълнение анимация - член на въртене от определен брой градуси. За това ние отново трябва да се превърне собственост. но с различна стойност - rotateZ (20deg). С тези параметри, блокът е завъртян на 20 градуса по часовниковата стрелка около оста Z:

9. 3D сянка

Мненията се разминават дизайнери е уместно, дали ефектът от плосък дизайн. Все пак, това CSS3 анимация е много оригинално и също се използва за уеб страници. ще постигне триизмерен ефект, използвайки вече познатите свойства кутия сянка (сянка създава многослоен) и с параметър translateX трансформация (-7px) (осигуряват хоризонтално изместване блок наляво от 7 пиксели):

Подкрепа браузър

Към днешна дата, преход имота поддържа следните браузъри: