Плавная анимация при наведении CSS или JavaScript
Плавную анимацию при наведении на объект можно сделать как с помощью JavaScript, так и с помощью CSS. На Урааа уже был материал, как сделать плавный hover на JQuery. Здесь же будет именно вариант плавной анимации на CSS.
Напомним, как это делалось на JavaScript
Код
<script type="text/javascript">
$.fn.rayHover = function () {
$(this).fadeTo(100,0.6);
return $(this).hover(
function(){$(this).stop().fadeTo("slow",1)},
function(){$(this).stop().fadeTo("slow", 0.6)}
);
}
$(".excoban").rayHover();
</script>
$.fn.rayHover = function () {
$(this).fadeTo(100,0.6);
return $(this).hover(
function(){$(this).stop().fadeTo("slow",1)},
function(){$(this).stop().fadeTo("slow", 0.6)}
);
}
$(".excoban").rayHover();
</script>
На CSS
Здесь все проще. Просто добавьте, например, в класс a псевдокласс :hover в Таблице стилей. Затем добавим:
Код
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
При этом 0.5s - время анимации в секундах. Таким образом у нас получилось:
Код
a:hover {
background:
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
background:
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
transition: background 0.5s ease;
Создать сайт в uKit
Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Воспользуйтесь сервисом uKit. Никакого кода!
Рейтинг лучших сервисов для самостоятельного создания сайта.
Легко! Если пользоваться нашими советами.
