728x90
반응형
- code -
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: wheat;
position: relative;
animation-name: example;
animation: example 4s linear infinite alternate;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div class='box'></div>
</body>
</html>
결과값
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [Html & jQuery] input 태그안에 value 값 넣는 초간단 방법 !! (0) | 2021.07.11 |
|---|---|
| [HTML & CSS] 이미지 반전 시키기 !(좌우대칭) (2) | 2021.05.04 |
| [HTML & CSS] 다양한 특수문자, 기호(Symbol)들 입력값 # 1 (0) | 2021.03.16 |
| [HTML & CSS] Text Shadow(텍스트 그림자 효과) 넣기 (0) | 2021.03.08 |
| [HTML & CSS] 네비게이션 바(Navigation Bar) 세로 버전 (0) | 2021.02.26 |
댓글