250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- SWIFT
- HTML
- image
- effect
- 애니메이션
- MAC
- front-end
- CSS
- 개발자
- css3
- keyframes
- javascript
- 비전공 개발자
- html5
- Animation
- 백엔드
- ipad
- xcode
- php
- iOS 개발자
- 자바스크립트
- IOS
- 프론트엔드
- react
- 비전공자
- iPhone
- 풀스택
- jQuery
- button
- hover
Archives
- Today
- Total
비전공자 개발일기
Image Animation Sequence 본문
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IMAGE ANIMATION SEQUENCE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="scene">
<img src="./newyork.png" class="city">
<img src="./plane.png" class="plane">
<img src="./cloud.png" class="cloud cloud-1">
<img src="./cloud.png" class="cloud cloud-2">
<img src="./cloud.png" class="cloud cloud-3">
<img src="./boat.png" class="boat">
</div>
</body>
</html>
.scene {
width: 230px;
height: 200px;
position: relative;
overflow: hidden;
background-color: #2598eb;
}
.scene img {
position: absolute;
}
.city {
width: 100%;
height: 50%;
bottom: -3px;
object-fit: cover;
}
.plane {
width: 45%;
top: 50px;
left: -50px;
animation: plane-move 15s linear forwards;
}
.cloud {
animation: clouds-move 22s linear forwards;
}
.cloud-1 {
width: 70px;
top: 0;
left: 30px;
}
.cloud-2 {
width: 35px;
top: 20px;
left: 125px;
}
.cloud-3 {
width: 45px;
top: 55px;
left: 145px;
}
.boat {
width: 30%;
bottom: 0;
right: -50px;
animation: boat-move 20s linear forwards;
}
@keyframes plane-move {
to {
transform: translate(300px, 100px);
}
}
@keyframes clouds-move {
to {
transform: translateX(-25px);
}
}
@keyframes boat-move {
to {
transform: translateX(-300px);
}
}
728x90
LIST
'HTML _CSS' 카테고리의 다른 글
Isometric Menu Hover Effects (0) | 2022.05.19 |
---|---|
Sprite Animation (0) | 2022.05.18 |
Nine Dots Menu (0) | 2022.05.11 |
3D BUTTON (0) | 2022.05.09 |
Floating Text (0) | 2022.05.07 |