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

Забележка: Тези ефекти са само в съвременните браузъри, които поддържат SSS3.

HTML маркиране

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

След като създадете маркиране попитам стилове. За нашите реакции определен клас да се използва с общи правила и се добавят специфични качества за всеки пример като отделни класове. В текста на урока префикси продавачите на браузъра ще бъдат пропуснати за по-голяма яснота.

Сега си представете, 10 ефекти. Отворете демо страница в отделен прозорец или раздел, да гледате и да се учат код.

Добавянето на специален клас на оглед и първи до един елемент с оглед клас на ефекта. Специален клас ще бъдат добавени във всеки пример, един елемент с оглед клас (изглед първи, изглед секунда, изглед трета и т.н.).

В този пример база прехода да се създаде голям ефект ще бъде използван.

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

Тук маска клас има различни параметри за изграждане на сила. Ние ще използваме трансформират свойства (превежда и завъртете):

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

В третия пример ще използваме трансформацията преведе и да се върти, за да се покаже нашето описание на елементите:

Сравнително прости инструкции, за да получите ефект.

В четвърти пример ще бъде използвана от прост мащабиране и графично съдържание, използвайки скала трансформация. За по-голям ще бъде настроен на 0.2S забавяне стилове, но когато курсорът ще забави 0s. Ето защо, когато мишката е върху ефекта ще се прояви веднага, но забавянето ще бъде прибран, когато курсора на мишката.

Прости инструкции за производство на ефекта. CSS3 може да направи всичко.

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

Inverse трансформация се извършва гладко:

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

Когато мишката, описващ елементи се появяват със закъснение:

Този пример създава отскок ефект при понижаване елементи описват по-горе.

Ние добавяме анимация към маската на елемента и да определят до дръжте описание elemenetov:

За да създадете ефект на връщане се използва translateY функция и няколко кадъра:

В този пример, ние използваме две маски елемент, за да създадете ефекта на затваряне на пердета:

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

Когато курсора на мишката над мащабиране и прозрачност:

заключение

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

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

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

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!