Создание интересных спецэффектов для ссылок с помощью :active.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rollovers 2</title>
<style>
body {
font: 12px arial, helvetica, sans-serif;
}
div a {
/* Note: Using 'div a' (targeting all a elements inside div elements) instead of simply 'a' (all a elements) so that this doesn't target the link back to HTML Dog at the bottom of the page */
display: block;
width: 200px;
height: 63px;
background-image: url(https://foxyforex.ru/wp-content/uploads/2023/09/toucancombo2.jpg);
text-indent: -999em;
text-decoration: none;
}
a:hover {
background-position: center;
}
a:active {
background-position: bottom;
}
</style>
</head>
<body>
<div>
<p><a href="#">Toucan</a></p>
<p><a href="#">Toucan</a></p>
<p><a href="#">Toucan</a></p>
</div>
</body>
</html>Страницы в тему:
- Вращение объекта с transform
- Откаты 3: затухание появляется и исчезает
- Ролловеры (Приёмы)
