All Articles Web
Повеселиться с CSS3 Переходы
Toby Pitman on Mon, July 25th 0 comments
If you are curious about how to create visual nice and responsive roll over effects with transitions in CSS3 then stop here. Toby Pitman, shows you how to implement some very neat CSS3 tricks.

Похоже, что производители браузеров действительно нажатием новых функций 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 примеров.

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



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: