728x90
CSS 애니메이션
html 요소에 스스로 움직임과 변화를 부여하는 기술 (CSS3)
실습 1
로 고
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 01</title>
<style type="text/css">
li {
list-style-type: none;
}
li a {
margin: 10px;
padding: 5px;
display: block;
width: 150px;
height: 40px;
text-decoration: none;
line-height: 40px;
background: lightblue;
transition: width 1s, background 1s;
}
li a:hover {
background: red;
color: white;
width: 300px;
}
</style>
</head>
<body>
<h3>로 고</h3>
<hr>
<ul>
<li><a href="#">메 일</a></li>
<li><a href="#">카 페</a></li>
<li><a href="#">블 로 그</a></li>
<li><a href="#">쇼 핑</a></li>
</ul>
</body>
</html>
실습 2
1:1
24시간
상담
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 02</title>
<style type="text/css">
@keyframes test {
0% { background: lightgray; transform: translate(0, 0); }
50% { background: lightgreen; transform: translate(100px, 200px); }
100% { background: red; transform: translate(0, 0); }
}
p {
padding: 10px;
width: 100px;
height: 100px;
background: lightgray;
animation-name: test;
animation-duration: 2s;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<p>1:1 <br>
24시간<br>
상담</p>
</body>
</html>
728x90
'Web > CSS' 카테고리의 다른 글
| [CSS] 선택자 (0) | 2023.06.22 |
|---|---|
| [CSS] 스타일 우선 순위 (0) | 2023.06.22 |
