Вы здесь: Главная > CSS > Простые CSS переходы: анимация ссылок

Простые CSS переходы: анимация ссылок

Опубликовано автором Просмотры: 28

Анимация ссылок с помощью простых CSS переходов.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Simple CSS transitions: Text links</title>
	<style>
		* {
			margin: 0;
		}
		body {
			font: 20px/1.5 arial, helvetica, sans-serif;
			color: #000;
			margin: 20px;
		}
		p {
			margin: 20px 0;
		}

		a {
			-webkit-transition: .5s;
			transition: .5s;
		}
	
		#elephant {
			color: #999;
		}
		#elephant:hover {
			color: #f66;
		}
	
		#plesiosaur {
			color: #06c;
			text-decoration: none;
			border-bottom: 3px solid #ddd;
		}
		#plesiosaur:hover {
			border-color: #06c;
		}
	
		#tourist {
			color: #f66;
		}
		#tourist:hover {
			color: #c00;
			background: #fcc
		}
	

		#htmldog a:hover {
			transform: rotate(360deg);
		}
	</style>
</head>
<body>
	<h1>Simple <a href="https://foxyforex.ru/css/css-perexody">CSS переходы</a></h1>
	<p>Используйте <a href="https://foxyforex.ru/css/svojstvo-css-transition"> <code>свойство transition</code></a> для базовых анимационных эффектов при наведении курсора мыши на ссылки.</p>
	<ul>
		<li><a href="" id="elephant">Изменение цвета</a></li>
		<li><a href="" id="plesiosaur">Изменение цвета границы</a></li>
		<li><a href="" id="tourist">Изменение цвета и фона</a></li>
	</ul></p>
	<ul>
		<li><a href="" id="elephant">Изменение цвета</a></li>
		<li><a href="" id="plesiosaur">Изменение цвета границы</a></li>
		<li><a href="" id="tourist">Изменение цвета и фона</a></li>
	</ul>
</body>
</html>

Страницы в тему:

Добавить комментарий