Css ефект от промяна анимация с помощта на WebKit
механизъм WebKit включва няколко комплексни трансформация и анимационни ефекти, които наистина могат да се освежат впечатленията на потребителите на Safari. Този урок дава кратък преглед на това как rotateY имот може да се възпроизвежда ефекта на завъртане, и как тя може да се използва за създаване на хладно дизайн за темата "Основни предимства на Трансформатори".
За пълния възпроизвеждане ефекта изисква браузъра Safari.
Примерът показва как превръщането ефект може да се използва за предоставяне на информация под формата на обръщане карта за игра. Задръжте курсора на мишката върху снимката на Optimus премиер и Мегатрон, за да видите техните характеристики. Сега ще разгледаме как се прави.
HTML е много проста. Чифт елементи
Предшестващо карта е зададено като първото повторение на текстурата на сиво, и след това всеки HTML елемент го стилизирани. h2 се заменя с образа на текста (тя може да бъде, за да добавите Photoshop ефекти). размер на шрифта и цвета се намира в елементите на параграфи, които също са поставени Autobot лога и Despetikonov.
За да се покаже характеристики и лого една до друга, DT и дд се измести наляво и надясно съответно. дл получава градиент във фонов режим и стила на текст, който отива в DT и дд.
анимация WebKit
За да я накара да работи в действие е един куп анимация WebKit и свойства на трансформация. Нека да започнем прегледа по-горе. Div контейнер получава -webkit-перспективен черта на 1000, за да добавите реализъм с движението на завъртане, в противен случай всичко изглежда плоска. На следващо място, -webkit-трансформация в стил: запазване-3d; и -webkit прехода: 0.5s; добави към Разделение карти. трансформация Стил запази-3d гарантира, че потомството елементи ще използват триизмерно движение, отколкото плосък. Стойността на прехода определя скоростта 0.5s общия ефект върху цялото.
Когато курсора на мишката се поставя върху картата, прибавя трансформация WebKit rotateY (180deg). който се върти обекта от 180 градуса по оста Y. -webkit-задната обвивка-видимостта: скрит; Все още е голям имот WebKit, който се използва за предната част на картата. По този начин, на обратната страна на картата е скрито, без този обект просто ще се прехвърлят в огледален образ на себе си, а на обратната страна ще остане невидим.
HTML напълно
CSS напълно
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!