728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
border-width: 5px;
border-style: solid;
background-color: aquamarine;
border-color: rgb(255, 51, 0) rgb(251, 255, 0) darkcyan darkslategrey;
animation-name: rotate;
animation-duration: 2.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes rotate {
from{
transform: rotate(0deg);
margin-left: 0;
bottom: 200px;
}
50% {
bottom: 550px;
}
to{
transform: rotate(2000deg);
margin-left: 1000px;
bottom: 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| grid 예제1 (0) | 2023.01.01 |
|---|---|
| flex 예제1 (0) | 2022.12.29 |
| animation 예제1 (0) | 2022.12.29 |
| transform연습 (0) | 2022.12.29 |
| transition 연습 (0) | 2022.12.29 |