Study/HTML5 & CSS3
HTML5 & CSS3 : animation 속성 응용
posey
2022. 11. 8. 09:20
2022.11.08.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 38
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 38
<CSS로 무당벌레 만들기 - px단위>
- HTML
<!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">
<link rel="stylesheet" href="../1108/01style.css">
<title>animation</title>
</head>
<body>
<div class="ladybug"></div>
</body>
</html>
- CSS
@charset "utf-8";
* {
padding: 0;
margin: 0;
}
.ladybug {
position: relative;
width: 288px;
height: 320px;
border-radius: 50%;
border: 1px solid #000;
margin: 200px auto 0;
/* margin-left: auto;
margin-right: auto;
margin-top: 200px; */
background: radial-gradient(rgba(0,0,0,1) 30%, transparent 33%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 50%, transparent 55%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 50%, transparent 55%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 40%, transparent 43%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 40%, transparent 43%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 45%, transparent 50%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 45%, transparent 50%, transparent 100%);
/* 80px의 30%짜리 검정색 원으로 시작 */
/* 30%까지는 검정색으로만, 30~33%는 검정색에서 투명하게, 33%~100%는 완전히 투명하게 */
background-color: #e11;
background-size: 80px 80px;
background-position: 105px 32px, 48px 96px, 160px 96px, 144px 176px, 64px 176px, 176px 240px, 32px 240px;
background-repeat: no-repeat;
}
.ladybug::before {
content: "";
display: block;
position: absolute;
left: 48px;
top: -38px;
width: 192px;
height: 80px;
background: #000;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
/* border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 0 0;
border-bottom-right-radius: 0 0; */
}
.ladybug::after {
content: "";
display: block;
position: absolute;
left: 80px;
top: -16px;
width: 16px;
height: 16px;
background: #000;
border-radius: 50%;
box-shadow: 0 0 0 16px #fff,
0 0 0 20px #000,
112px 0 0 0 #000,
112px 0 0 16px #fff,
112px 0 0 20px #000,
192px 80px 0 3px #000,
216px 176px 0 3px #000,
192px 264px 0 3px #000,
-80px 80px 0 3px #000,
-104px 176px 0 3px #000,
-80px 264px 0 3px #000;
}
.ladybug:hover {
animation: ladybug 2s;
}
@keyframes ladybug {
0% {
background-position: 105px 32px, 48px 96px, 160px 96px,
144px 176px, 64px 176px, 176px 240px,
32px 240px;
}
50% {
background-position: 105px 128px;
}
100% {
background-position: 105px 32px, 48px 96px, 160px 96px,
144px 176px, 64px 176px, 176px 240px,
32px 240px;
}
}
0
<CSS로 무당벌레 만들기 - em 단위>
- HTML
<!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">
<link rel="stylesheet" href="../1108/02style.css">
<title>animation</title>
</head>
<body>
<div class="ladybug small"></div>
<div class="ladybug medium"></div>
<div class="ladybug big"></div>
</body>
</html>
- CSS
@charset "utf-8";
* {
padding: 0;
margin: 0;
}
.small {
font-size: 50%;
}
.medium {
font-size: 100%;
}
.big {
font-size: 200%;
}
.ladybug {
position: relative;
width: 18em;
height: 20em;
border-radius: 50%;
border: 1px solid #000;
margin: 12.500em auto 0;
cursor: pointer;
background: radial-gradient(rgba(0,0,0,1) 30%, transparent 33%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 50%, transparent 55%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 50%, transparent 55%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 40%, transparent 43%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 40%, transparent 43%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 45%, transparent 50%, transparent 100%),
radial-gradient(rgba(0,0,0,1) 45%, transparent 50%, transparent 100%);
/* 30%까지는 검정색으로만, 30~33%는 검정색에서 투명하게, 33%~100%는 완전히 투명하게 */
background-color: #e11;
background-size: 5em 5em;
background-position: 6.6em 2em,3em 6em,10em 6em,4.1em 11em,
9em 11em, 2em 15.6em,11em 15.6em;
background-repeat: no-repeat;
}
.ladybug::before {
content: "";
display: block;
position: absolute;
left: 3em;
top: -2.4em;
width: 12em;
height: 5em;
background: #000;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
/* border-top-left-radius: 50% 100%;
border-top-right-radius: 50% 100%;
border-bottom-left-radius: 0 0;
border-bottom-right-radius: 0 0; */
}
.ladybug::after {
content: "";
display: block;
position: absolute;
left: 5em;
top: -1em;
width: 1em;
height: 1em;
background: #000;
border-radius: 50%;
box-shadow: 0 0 0 1em #fff,
0 0 0 1.3em #000,
7em 0 0 0 #000,
7em 0 0 1em #fff,
7em 0 0 1.3em #000,
12.4em 5em 0 0.2em #000,
13.5em 11.3em 0 0.2em #000,
11.3em 17.5em 0 0.2em #000,
-5.3em 5em 0 0.2em #000,
-6.6em 11.3em 0 0.2em #000,
-4.4em 17.5em 0 0.2em #000;
}
.ladybug:hover {
animation: ladybug 2s;
}
@keyframes ladybug {
0% {
background-position: 6.6em 2em,3em 6em,10em 6em,4.1em 11em,
9em 11em, 2em 15.6em,11em 15.6em;
}
50% {
background-position: 6.6em 8em;
}
100% {
background-position: 6.6em 2em,3em 6em,10em 6em,4.1em 11em,
9em 11em, 2em 15.6em,11em 15.6em;
}
}
0
<animation 속성 응용 예제>
- HTML
<!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">
<link rel="stylesheet" href="../1108/04style.css">
<title>animation</title>
</head>
<body>
<div class="container">
<div class="round"></div>
<ul class="tex_wrap">
<li class="text w">w</li>
<li class="text a">a</li>
<li class="text v1">v</li>
<li class="text v2">v</li>
<li class="text e">e</li>
</ul>
</div>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff);
}
* {
padding: 0;
margin: 0;
}
ul, li {
list-style: none;
}
body {
background: #000;
margin-top: 100px;
}
.container {
position: relative;
width: 300px;
margin: 100px auto;
}
.round {
position: absolute;
left: 170px;
bottom: -20px;
width: 20px;
height: 20px;
border-radius: 10px;
background: hotpink;
animation: round 1s infinite;
}
.tex_wrap {
display: flex;
justify-content: space-between;
color: white;
font-family: opensans;
font-size: 60px;
}
@keyframes text {
0% {transform: translate(0, -60px);}
100% {transform: translate(0,0);}
}
.text {
animation: text 1s infinite
}
.w {
animation-delay: 0s;
}
.a {
animation-delay: 0.2s;
}
.v1 {
animation-delay: 0.4s;
}
.v2 {
animation-delay: 0.6s;
}
.e {
animation-delay: 0.8s;
}
@keyframes round {
0% {left: 50px;}
25% {left: 110px;}
50% {left: 170px; width: 80px;}
75% {left: 230px;}
100% {left: 290px;}
}
0
<animation 속성 응용 예제>
- HTML
<!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">
<link rel="stylesheet" href="../1108/03style.css">
<title>animation</title>
</head>
<body>
<section>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</section>
<section>
<h1>Jellibeans</h1>
</section>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: rammettoone;
src: url(../fontawesome-free-6.2.0-web/webfonts/RammettoOne-Regular.ttf);
}
* {
padding: 0;
margin: 0;
}
body {
background: #6b566b;
margin-top: 100px;
}
section {
width: 50%;
margin: 0 auto;
text-align: center;
}
.c1 {
display: inline-block;
position: relative;
width: 1.250em;
height: 1.250em; /* 1.250em=20px */
}
.c1::before {
content: "";
display: block;
width: 100%;
border-radius: 50%;
height: 0.625em; /* 0.625em=10px */
background: rgba(0,0,0,0.1);
position: absolute;
bottom: -0.1em; /* 0.1em=1px */
animation: shadow 1s linear 0s infinite;
}
.c1::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: #ffe1c9;
border-radius: 50%;
position: relative;
top: -2.5em; /* 2.5em=40px */
transform: rotate(45deg);
animation: jellijump 1s linear 0s infinite;
}
.c2 {
display: inline-block;
position: relative;
width: 1.875em; /* 1.875em=30px */
height: 1.875em;
}
.c2::before {
content: "";
position: absolute;
bottom: -0.1em;
display: block;
width: 100%;
height: 0.9383em; /* 0.9383em=15px */
border-radius: 50%;
background: rgba(0,0,0,0.1);
animation: shadow 1s linear 0.2s infinite;
}
.c2::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fac7b4;
border-radius: 50%;
position: relative;
top: -2.5em;
transform: rotate(45deg);
animation: jellijump 1s linear 0.2s infinite;
}
.c3 {
display: inline-block;
position: relative;
width: 2.5em;
height: 2.5em;
}
.c3::before {
content: "";
display: block;
width: 100%;
border-radius: 50%;
height: 1.25em;
background: rgba(0,0,0,0.1);
position: absolute;
bottom: -0.1em;
animation: shadow 1s linear 0.4s infinite;
}
.c3::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fca89d;
border-radius: 50%;
position: relative;
top: -2.5em;
transform: rotate(45deg);
animation: jellijump 1s linear 0.4s infinite;
}
.c4 {
display: inline-block;
position: relative;
width: 3.125em;
height: 3.125em;
}
.c4::before {
content: "";
display: block;
width: 100%;
border-radius: 50%;
height: 1.563em;
background: rgba(0,0,0,0.1);
position: absolute;
bottom: -0.1em;
animation: shadow 1s linear 0.6s infinite;
}
.c4::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: #afc7b9;
border-radius: 50%;
position: relative;
top: -2.5em;
transform: rotate(45deg);
animation: jellijump 1s linear 0.6s infinite;
}
h1 {
font-family: rammettoone;
font-size: 4rem; /* 4rem=64px */
letter-spacing: -2px; /* 0.125em=2px */
color: #6b566b;
text-shadow: 0 0 0 #afc7b9,
1px 1px 0 #afc7b9, /* 0.063em=1px */
-2px -2px 0 #afc7b9, /* 0.125em=2px */
-3px -3px 0 #afc7b9, /* 0.188em=3px */
-4px -4px 0 #afc7b9, /* 0.250em=4px */
-5px -5px 0 #fca89d, /* 0.313em=5px */
-6px -6px 0 #fca89d, /* 0.375em=6px */
-7px -7px 0 #fca89d, /* 0.438em=7px */
-8px -8px 0 #fac7b4, /* 0.5em=8px */
-9px -9px 0 #fac7b4, /* 0.563em=9px */
-10px -10px 0 #fac7b4, /* 0.625em=10px */
-11px -11px 0 #fac7b4, /* 0.688em=11px */
-12px -12px 0 #ffe1c9, /* 0.75em=12px */
-13px -13px 0 #ffe1c9, /* 0.813em=13px */
-14px -14px 0 #ffe1c9, /* 0.875em=14px */
10px -10px 0 rgba(0,0,0,0.8),
0 8px 8px rgba(0,0,0,0.15);
}
@keyframes jellijump{
5%{
top: -2.500em;
}
20%{
top: -1.875em;
}
40%{
top: -0.625em;
border-radius: 50%;
}
45%{
border-radius: 60% 40% 60% 40%;
}
50%{
top: 0em;
border-radius: 70% 40% 80% 40%;
}
60%{
top: -0.625em;
border-radius: 90% 40% 90% 40%;
}
80%{
top: -1.875em;
border-radius: 40% 80% 40% 70%;
}
90%{
border-radius: 60% 40% 60% 40%;
}
95%{
top: -2.500em;
border-radius: 50%;
}
}
@keyframes shadow{
0%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
100%{
transform: scale(0.5);
}
0
반응형