728x90
CSS 애니메이션
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>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
728x90
