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 | 31 |
Tags
- button
- xcode
- 자바스크립트
- 풀스택
- 비전공자
- MAC
- 애니메이션
- html5
- IOS
- react
- Animation
- iPhone
- CSS
- javascript
- front-end
- image
- ipad
- 프론트엔드
- SWIFT
- css3
- 개발자
- hover
- HTML
- keyframes
- 비전공 개발자
- iOS 개발자
- 백엔드
- jQuery
- php
- effect
Archives
- Today
- Total
비전공자 개발일기
Wandering cube Loader 본문
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>WANDERING CUBE LOADER</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wandering-cubes">
<div class="cube cube-1"></div>
<div class="cube cube-2"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
}
.wandering-cubes {
width: 4em;
height: 4em;
position: relative;
margin: auto;
}
.wandering-cubes .cube {
background-color: #229ABC;
width: 2em;
height: 2em;
position: absolute;
top: 0;
left: 0;
animation: wandering-cubes 1.8s ease-in-out -1.8s infinite both;
}
.wandering-cubes .cube-2 {
animation-delay: -0.9s;
}
@keyframes wandering-cubes {
0% {
transform: rotate(0);
}
25% {
transform: translateX(3em) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(3em) translateY(3em) rotate(-179deg);
}
50.1% {
transform: translateX(3em) translateY(3em) rotate(-180deg);
}
75% {
transform: translateX(0) translateY(3em) rotate(-270deg) scale(0.5);
}
100% {
transform: rotate(-360deg);
}
}
728x90
LIST
'HTML _CSS' 카테고리의 다른 글
Universe Loading (0) | 2023.02.27 |
---|---|
Text Animation (0) | 2023.02.24 |
Apple iMessage (0) | 2023.02.22 |
HTML dialog tag (0) | 2023.02.20 |
Toolbar Motion (0) | 2023.02.19 |