Плавно меняет цвет. Плавное изменение цвета фона. Изменение цвета фона элемента

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

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 можно с любыми селекторами.

Сегодня мы с Вами узнаем как сделать плавное изменение цвета блока с помощью 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 - это скорость анимации.

Здравствуйте, уважаемые читатели. Сегодня пост будет посвящен тем, кто изучает сайтостроение. На сегодняшний день язык оформления интернет-страниц (CSS) шагнул достаточно далеко. Что поделать, будущее уже наступило. И с его помощью теперь можно не только располагать элементы на странице и , но и применять в ним более интересные эффекты, что придает оформлению страницы совершенно другой вид. Некоторые из них мы сейчас рассмотрим.

• Плавное изменение цвета
• Плавное затухание
• Плавное увеличение — уменьшение
• Плавное перемещение
• Плавный поворот

CSS код пишем примерно тот же самый, только свойство указываем — all, то есть ко всему, что последует после , будет применена плавность. В нашем случае это затухание. Блок изменит прозрачность при наведении на 50%.

Webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; #block1:hover{opacity:0.4;}

Здесь все то же самое. Только в примере я установил значение linear вместо ease. Устанавливаем в ширину и высоту, отличную от оригинального размера.

Здесь значения будем прописывать в псевдоклассе, используя свойство transform.

#block1:hover{ -webkit-transform: translate(50px,0); -moz-transform: translate(50px,0); -o-transform: translate(50px,0); transform: translate(50px,0); }; }

#block1:hover{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }

Это означает, что объект будет повернут на 180° по часовой стрелке

Вернемся к теме о браузерах. Opera, Mozilla, Chrome прекрасно поддерживают все эти новшества, но как обычно живет своей жизнью и никуда не спешит. У него и так все хорошо. 🙂 То есть все, о чем я писал выше, он просто не понимает. Вот такие дела. Скачайте исходники и изучите код более подробно.