728x90
CSS를 이용해서 위아래, 좌우로
움직이는 강아지를 구현하는 예제입니다.
소스코드(HTML)
<div> 태그안에 <img>태그를 넣어 dog.png 사진을 넣어줍니다.
<body class="container">
<div>
<img class="img-concert dog1" src="img/dog.png">
</div>
<div>
<img class="img-concert dog2" src="img/dog.png">
</div>
</body>
2마리의 강아지 이미지가 준비되었습니다.
소스코드(CSS)
애니메이션 CSS를 아래와 같이 만들어 줍니다.
자세한 설명은 주석을 달아 두었으니 값을 변경하면서 확인해 보시기 바랍니다.
.container {
flex-direction: row;
margin-top: 200px;
/* flex-direction: column; */
/* flex-direction: row-reverse; */
/* flex-direction: column-reverse; */
border: 2px solid #333333;
}
.img-concert{
width: 100px;
height: 100px;
}
div .dog1 {
position: relative;
animation-name: dog1; /*사용할 keyframe*/
animation-duration: 2s; /*애니메이션이 한번 실행되는 시간*/
animation-timing-function: linear; /*애니메이션이 실행되는 동안의 움직임 (, ease-in / ease-out )*/
animation-iteration-count: infinite; /*반복횟수:무한*/
animation-direction: alternate; /*한번 실행된 후에 반대방향으로 한번 실행*/
}
/* dog1 이라는 이름의 애니매이션을 사용하겠다 */
@keyframes dog1 {
0% {left:0px; top:0px;} /*시작위치*/
100% {left:0px; top:100px;} /*도착위치*/
}
div .dog2 {
position: relative;
animation-name: dog2; /*사용할 keyframe*/
animation-duration: 2s; /*애니메이션이 한번 실행되는 시간*/
animation-timing-function: ease-in; /*애니메이션이 실행되는 동안의 움직임 (ease-in / ease-out )*/
animation-iteration-count: infinite; /*반복횟수:무한*/
animation-direction: alternate; /*한번 실행된 후에 반대방향으로 한번 실행*/
}
/* dog2 이라는 이름의 애니매이션을 사용하겠다 */
@keyframes dog2 {
0% {left:600px; top:0px;} /*시작위치*/
100% {left:0px; top:0px;}/*도착위치*/
}
소스코드 다운로드
강아지 이미지와 소스코드입니다.
dog.png
0.09MB
[CSS] 애니메이션-움직이는 강아지.txt
0.00MB
반응형
그리드형
'IT > HTML & CSS & JavaScript' 카테고리의 다른 글
| [CSS] 하트 만들기(div, before, after) (0) | 2021.09.17 |
|---|---|
| [CSS] margin, padding 개념 & 사용법 정리 (0) | 2021.09.17 |
| [CSS] 마우스 hover / 이미지 확대 2가지 방법 (1) | 2021.09.17 |
| [CSS] 가상요소(before), 가상클래스(hover) 사용법 (0) | 2021.09.16 |
| [CSS] !important - 속성값 우선 적용방법 (0) | 2021.09.16 |
댓글