반응형
Q>
CSS의 @keyframes을 이용해 화살표와 같이 움직이는 애니메이션을 구현해 보자.
A>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
animation: 3s move;
animation-iteration-count: 10;
}
@keyframes move {
0% {
left: 0px;
top: 0px
}
25% {
left: 300px;
top: 0px;
}
50% {
left: 300px;
top: 300px;
}
75% {
left: 0px;
top: 300px;
}
100% {
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
R>
 |
|
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 7 (0) | 2020.12.06 |
|---|---|
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 6 (0) | 2020.12.06 |
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 4 (0) | 2020.12.02 |
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 3 (0) | 2020.12.02 |
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 2 (0) | 2020.11.23 |
