X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Свободный доступ Премиум

Доступ всей нашей библиотеке Премиум Статьи концентратор, файлы проекта и первые 10% от каждого Учебник-Video из Интернет библиотека Учебник .

Создайте свой бесплатный аккаунт!

Повеселиться с CSS3 Переходы
Перевод Google Translate

Похоже, что производители браузеров действительно нажатием новых функций CSS3 по крайней довольно быстрыми темпами, несмотря на CSS2.1 только будучи

Хотя CSS3 является лет от Земли от завершения большинстве современных браузеров реализуют его на некоторое время. В этом быстрый наконечник Ill показать вам, аккуратный пролонгации эффекта с помощью CSS3 переходы.


Шаг 1

У меня есть очень простой разметки здесь. Просто неупорядоченный список с некоторыми ссылками дюйма:


Ive поставить ссылку теги внутри некоторых промежуток теги только для обратной совместимости. Я знаю его не строго семантической но если вы хотите, чтобы это работало в IE6 (Вибрация кулак!) Это, как вы будете нуждаться, чтобы отметить его как IE6 (Вибрация кулак!) Не поймут: наведите на чем-либо, кроме ссылки тэги. Для IE7 Вы будете должны удостовериться, объявить тип документа для: наведите работать на не-связь элементов. Жалкие, я знаю!

Ive применять некоторые простые стили, чтобы сделать горизонтальную панель навигации.


Это результат:


Ive применяется дисплей: встроенный; в список тэгов, чтобы предотвратить некоторые вопросы макета в IE6 (Вибрация кулак!).


Шаг 2

Теперь я собираюсь применить фоновое изображение к моему теги ссылке:


Это результат:


Я знаю, это выглядит немного странно, но медведь со мной. Изображение позиционируется с помощью правила фоне сокращения.

Справочная информация: ;


Шаг 3

Теперь я могу стиле промежуток теги.


Это результат.


Вы будете замечать, что фоновое изображение ссылкой теги 'теперь скрыты цвет фона промежуток тег, который сидит на нем. Промежуток тег также 20px меньше в высоту, чем ссылка тега. Это важно!


Шаг 4

Теперь Ill применять: наведите правило мою ссылку тега. Это приведет к тому фоне ссылка теги изображение, чтобы переместить 10px вниз, по существу, раскрывая его, когда наведении указателя мыши на ссылку.


Это результат.


В этот момент вы, по сути в резервный режим. Текущей разметки должна работать во всех известных браузеров. Любой код, я добавляю отныне будет CSS3 и поддержки будет варьироваться от браузера к браузеру.


Шаг 5

Теперь Ill добавить свое CSS3 правила перехода по ссылке теги.


Вот как это работает.

переходного периода:

все (распространяются на все CSS-свойства этого элемента)

0,3 сек (время для перехода)

линейные (сроки кривой перехода)


Теперь любое изменение в свойствах ссылки тэги (при наведении) будет плавно переходящими в новое значение. А именно положение фона и цвет текста.

Вы будете также отметить, что Есть немало префиксы поставщиком для стран с переходной CSS. Каждый браузер в настоящее время реализует этот эффект по-разному, поэтому мы должны быть ориентированы на столько, сколько мы можем.


-МОЗ-= Mozilla Firefox

-WebKit-= Safari, Chrome

-О-= оперы


Как только это будет завершена она станет просто переход.


Шаг 6

Наконец Ill добавить несколько быстрых закругленными углами.


Это результат:


Совместимость

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


Заключение

Эта концепция может быть применена к нагрузкам опрокидывания эффектов. В скачать ниже вы будете найти еще несколько примеров, включая этот эффект, где, когда наводите курсор на альбоме он показывает вам формате CD, винил с хорошим переходом.


Скачать специальные CSS3 примеров.

Спектакль о и повеселиться



Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link