Теперь добавим плавное изменение цвета шрифта:

a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease, color 0.3s ease; } a.foo:hover { background: #33f; color: #fff; }

Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 0.3 секунд. Если же нам нужны одинаковые свойства для всех элементов, мы можем заменить
-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на
-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойстам и с одинаковыми параметрами - 0.5 секунд, ease-эффект.

Так же, мы можем добавить задержку для эффекта:

a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: all 0.5s ease; -webkit-transition-delay: 0.5s; } a.foo:hover { background: #33f; color: #fff; }

Теперь наша анимация будет работать через полсекунды после наведения мышки.

Применять свойство transition можно к чему угодно - фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы:focus и:active. Вообще - использовать transition можно с любыми селекторами.

Цвет ссылки устанавливается через свойство color , которое добавляется к селектору A . Для изменения цвета ссылки при наведении на неё курсора мыши применяется псевдокласс :hover , а чтобы смена цвета происходила плавно, к селектору A следует добавить свойство transition , значением которого выступает время. Оно указывается обычно в секундах или миллисекундах.

Пример 1. Изменение цвета ссылок

Цвет ссылок a { color: #008; /* Цвет текста */ background: #ffc; /* Цвет фона */ padding: 2px; /* Поля вокруг текста */ transition: 1s linear; /* Время изменения */ } a:hover { color: #fff; /* Цвет текста */ background: #008; /* Цвет фона */ }

Для сборки мегадроида требуется открыть коробку, достать мешочек с микросхемами и сложить их в нужном порядке, пользуясь нашим подробным 8631-страничным руководством.

В данном примере для наглядности выбраны контрастные цвета и задано время перехода одна секунда. На рабочем сайте время лучше установить меньше, 0.6s или около того. Так что подбирайте значение по своему вкусу и желанию.

Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью CSS и JQuery . С помощью данного плагина можно добиться удивительно красивых результатов оформления. Например, можно сделать клёвое меню, которое будет плавно менять цвет при наведении, и поверьте, смотрится это очень красиво.

Для начала между тегами и нужно поставить следующее:

Затем опять же между тегами и копируем вот этот скрипт:

$(document).ready(function(){ $(".Box").hover(function() { $(this).stop().animate({ backgroundColor: "#FF4500"}, 400); },function() { $(this).stop().animate({ backgroundColor: "#ffffff" }, 400); }); });

Где .Box — это класс блока, который мы придумали выше в CSS.

«#FF4500 » — цвет при наведении. 400 — скорость анимации при наведении.

«#ffffff» — исходный цвет после убирания курсора. 400 — скорость анимации при убирании курсора.

После того когда Вы всё сделаете как написано выше, цвет блока плавно будет меняться . Чтобы такой блок вставить на страницу, нужно просто добавить следующее в нужное место:

И блок появится.

Данный плагин может менять только цвет фона (бекграунд). Например к ссылкам или к тексту его прикрепить не получится. Цвет ссылок меняет другой плагин (скоро обязательно напишу как сделать).

Если Вам захочется сделать чтобы блоки на странице были разного цвета, как у меня в , Вам нужно будет между тегами и поставить несколько скриптов подряд и соответственно не забыть поменять цвет на желаемый. Самое главное нужно поменять класс, например в нашем примере выше — класс Box , а следующий скрипт должен быть с другим классом, например Box1 , затем Box2 и так далее.

Вот и всё, дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорых встреч.

В этом уроке речь пойдет об эффекте, при котором происходит плавная смена фона объекта в результате наведения курсора мыши на него.
В начале, как уже наверно успели привыкнуть (если вы не первый раз используете jQuery библиотеку), подключаем jQuery в нашего сайта.
По мимо самого jQuery , нам понадобиться еще и jQuery UI .

Если вы знакомы с принципами jQuery , то должны помнить, что в хедер мы должны поместить код вызова, в данном случае, анимации смены цвета, чтобы он подгрузился до того, как загрузится основное содержимое страницы. $(document).ready(function() { // поместить ваш код вызова анимации сюда });

Вот пример разметки html .

Изменение цвета фона элемента Анимация изменения цвета при наведении курсора / PC игры / Portal 2 Portal 2

Оригинальная Portal - вещь уже культовая и неожиданная для своего времени. Она только еще раз подтверждает проверенный веками тезис о торжестве идеи над передовыми технологиями.

CSS стили оформления нашей странички выглядят так.

Png); text-align:left; color:#333; width:800px; font-size:14px; font-family:georgia, "time new romans", serif; margin:0 auto; padding:0; } a{ color:#333; text-decoration:none } a:focus { outline: none; } h1 { font-size: 34px; font-family: verdana, helvetica, arial, sans-serif; letter-spacing:-2px; color:#394BEA; font-weight:700; padding:20px 0 0; text-shadow:0 1px 1px #70C5ED; } h2 { font-size: 24px; font-family: verdana, helvetica, arial, sans-serif; color:#5C81CB; font-weight: 400; padding: 0 0 10px; text-shadow:0 1px 1px #70C5ED; } h3, h3 a{ font-size:14px; font-family:verdana, helvetica, arial, sans-serif; letter-spacing:-1px; color:#333; font-weight: 700; text-transform:uppercase; margin:0; padding:8px 0 8px 0; } p { color:#333; float:left; line-height:22px; margin:5px; padding:0 0 10px; } #container { margin: 0; padding: 0; } .boxes { background:#fff; border:1px solid #ccc; float:left; padding:10px; position:relative; width:600px; } img { border:5px solid #CCCCCC; } div.info { border-bottom:1px solid #CCCCCC; float:left; margin:0; padding:0; width:100%; } .block { color:#0066CC; float:left; overflow:hidden; position:relative; width:600px; } .block h4, .block h4 a{ color:#333333; font-size:11px; padding:5px 0; text-shadow:0 1px 1px #CEDEFD; text-transform:uppercase; }

DIV элемент имеющий класс .boxes - является элементом, блоком, у которого мы хотим поменять цвет.
Вот этот код мы и будет вызвать в хедере.

$(document).ready(function(){ $(".boxes").hover(function() { $(this).stop().animate({ backgroundColor: "#40B8FE"}, 800); },function() { $(this).stop().animate({ backgroundColor: "#ffffff" }, 800); }); }); В параметрах backgroundColor задается цвет, а значение 800 - это скорость анимации.