2_hover효과
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
2.마우스 오버 효과
1.1. button-hover
1.1.1. mouse-hover1
<a href="#"><span></span>hover me</a>
1.1.2. mouse-hover2
<ul>
<li>
<a href="#">
home
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</li>
<li>
<a href="#">
about
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</li>
<li>
<a href="#">
services
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</li>
<li>
<a href="#">
team
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</li>
<li>
<a href="#">
contact
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</li>
</ul>
1.1.3. mouse-hover3
<button class="btn">button</button>
1.1.4. mouse-hover4
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS animatin, transitions and transforms</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
</head>
<body>
<ul>
<li><i class="fas fa-heart"></i></li>
<li><i class="fas fa-glass-martini"></i></li>
<li><i class="fas fa-globe"></i></li>
<li><i class="fas fa-gift"></i></li>
</ul>
</body>
</html>