Увеличаването на бутони и въртящ лого

Такава задача не е трудно да си дадете сметка, просто трябва да се прибегне до помощта на CSS3. И тъй като този стандарт има все повече се държи пространства на Интернет и на "стандартът на бъдещето" се превръща в "стандарта на това", а след това аз силно препоръчваме да се обърне внимание на това.

Така че, от философска рефлексия, нека да се залавяме за работа. Между другото, това, което ние ще получи, можете да видите, като кликнете върху иконата "Demo". И в "Източници" Вие, както винаги, ще намерите всички изходни файлове.

1. Започваме, както винаги, за да се създаде HTML-файл. Ще използвам синтаксиса HTML5, и моето досие код е съвсем проста, защото аз ще създаде капачка сайт, който ще съдържа заглавие; бутони за навигация са поставени при неподредените списъци и лого. Повече от всичко, което имаме в файла и няма да бъде, но тук имаме, е необходимо нищо повече, тъй като основната работа ще се извършва върху бутоните и логото.

Това е кодът на нашия HTML-файл:

основен
продукти
услуги
контакти

Както можете да видите от кода, цялата ни шапка се крие в «заглавна» маркер, а той от своя страна се състои от: горен; навигация етикет «навигация» и лого.

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

2. Сега нашата задача е да се създаде една и съща лист файл стил, който е свързан с нашата оформление. Създаване на «style.css» файл и го запазете в същата директория като наш HTML-файл.

Нека да започнем ние даваме нашата шапка повече или по-малко претрупан външен вид, че е да се поставят всички елементи по местата си.

Монтирайте го в досието на масата следния код стил:

просто тук. На първо място, ние се ширината на «тяло» маркери, и приведе към центъра.

Около блок капачка «удар с глава на задачите» ние се височината и ширината на рамката, както и относителната позициониране, че по-нататък ще ни позволи да го разположите във връзка с «заглавна» маркер.

Заглавие «h1» присвояваме дясното подравняване, вдлъбнатината от типа на полето шрифт и размер, както и цвета на шрифта и сянката на текста.

Logo (който има ID «лого») ние позиционира напълно и му задайте стойност «отгоре» и «ляво», определяйки по този начин му се място в нашата капачка.

Единица, включваща един бутон (маркерът «навигация»), присвояваме на потока около десния ъгъл и съответния вдлъбнатината.

Ние премахнете подчертаването на връзките и присвояване на цвят.

След прилагане на тези стилове, нашата шапка е както следва.

3. Сега нека да направим така, че когато мишката витае над ключовете ни, те са малко по увеличаване на обема и да се промени цвета си.

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

CSS трансформации са сравнително нови, така че това имущество все още е необходимо да се използва префиксите продавачите на браузъра.

Стойността на «трансформиране» ние ще използваме «мащаб» (увеличение) на една малка стойност.

За да зададете стилове за бутоните, когато движите мишката върху тях, ние ще използваме псевдо «: мишката».

Сега, избройте следния код към своя стил лист:

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

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

Имотът на «прехода», ние също ще използва префикси.

Сега всичко, което трябва да направим - е да добавите стилове за «навигация ли» следния код:

-WebKit прехода: всички .5s; -moz прехода: всички .5s; -О-преход: всички .5s; преход: всички .5s;

Сега нашата анимация ще бъде гладка, а ако обновете браузъра и задържите показалеца на мишката върху някой от бутоните, ще го види.

4. Сега отидете на логото на въртенето. Аз ще създаде ефект на въртене, когато задържите показалеца на мишката върху логото. Между другото, можете да направите, за да се случи въртене веднага щом потребителят натисне страницата. За това, а след това, вместо да се прилагат стилове, за да «#logo: навъртам», прилагате стилове към «#logo».

Искам да се постигне ефектът, че когато мишката върху логото, за пръв път е завъртян по часовниковата стрелка и след това анти-а в края спирка.

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

За да направите това, да създавате ключови кадри (ключови кадри). Ключов кадър анимация - това е отделен кадър в анимацията, което обуславя появата на сцената.

Първото нещо, което трябва да се коригира ключови кадри. Важното в случая също не е без представки. Може да откриете, че това е малко тромава, но трябва да се направи анимация работата във всички популярни браузъри.

Просто добавете следния код, за да ви стил лист.

Виж, тук ние създаваме анимацията. «Logo» - е името на анимацията, в която ние ще продължим да се отнасят към него.

«От» - първият кадър от анимацията, той определя първоначалното положение на въртене (0 градуса).

"50%" - втори кадър от анимацията, нашата фигура ще се върти със скорост -720 градуса по него.

«Да» - това е последният кадър от анимацията, и да го разбера отново се връща в първоначалното си положение (0 градуса).

Както можете да видите в нашата анимация на 3 кадъра: фигура се върти по часовниковата стрелка, а след това назад и спира. Но рамката, както разбираш, може да има повече.

Сам по себе си този код не прави нищо. Ако в момента се опитват да презаредите страницата и мишката върху логото, тогава нищо няма да се промени. Този код се отнася само правилата за анимацията.

И за нас, за да приложи това е необходимо да се регистрирате дори малка част от кода.

Ето, ние присвоите нашето лого псевдо «: мишката» и постави този имот «анимация» (както винаги с префикс). Параметрите са указани името на нашата анимация и неговата продължителност.

Това е всичко. Можете да обновите вашия браузър, поставете курсора на мишката върху логото и се насладете на анимацията.

За съжаление, на екрана не е възможно да се покаже анимацията, но като кликнете върху "Demo" иконата Можете да видите всичко.

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

Въпреки това, ще се съгласите, че е много готино да бъде в състояние да създаде прости анимации (и може би ще се превърне по-сложно), като се използва само един лист със стилове, и без помощта на програмите за трети страни.

С теб е Анна Kotelnikova.

Желая ти късмет, приятели мои! Научете, разработване, генериране на творчески идеи. По принцип, за да се създаде!

Докато се срещнем отново!