CSS 2D
transform // can i use 에서 보면 거의 대부분 호환됨.
2차원 좌표에서 요소를 변형시키는 속성
이동, 확대, 축소, 회전, 경사 등을 만들 수 있음 // 움직이는 걸 보여주지는 않음
trnaslate: 이동
rotate: 회전
scale: 확대, 축소
skew: 경사 // 비틀림
[01_transform.html]@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
✔ 벤더 프리픽스(vendor prefix) // caniuse에서 노란색으로 나오는 부분은 이걸 붙여줘야 됨(빨강은 붙여도 안됨)
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때
이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사
- W3C CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만
아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 붙이는 접두사
- -webkit- : 크롬, 엣지를 위한 접두사
- -o- : 오페라를 위한 접두사
- -ms- : 익스플로러를 위한 접두사
- -moz- : 파이어폭스를 위한 접두사
- 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며,
표준 문법 코드는 가장 마지막에 작성해야 함!!! *** ★★★★★
✔ postcss // 라이브러리임('기능'인 거야) // 벤더 프리픽스를 굳이 신경 쓰지않아도 얘네가 커버해줌
- css를 현대적으로 바꿔주는 라이브러리
- css를 자동화하기 위해 자바스크립트 기반 라이브러리(소프트웨어 개발 도구)
transition
- 요소에 추가할 css 스타일 전환효과를 설정
- 추가할 전환효과나 지속시간도 설정
property: 요소에 추가할 전환효과를 설정 // transition-property 이런형식의 속성, transition으로 퉁
timing-function: 전환효과의 값을 설정
linear(처음부터 끝까지 일정한 속도)
ease(전환효과가 천천히 -> 빨라지고 -> 천천히 -> 끝)
duration: 전환효과를 나타내는 시간을 설정
delay: 설정한 시간만큼 대기하다 전환효과를 나타냄
[02_transition1.html] @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
[03_transition2.html] @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
CSS Animation // (※ 스프라이트 이미지) // 프레임을 자동화 시키는 기능도 있음
요소의 현재 스타일을 다른 스타일로 변환
@keyframe 규칙을 사용
@keyframe
시작: 0%, from
과정: 1%, 5%, ..
끝: 100%, to
0% 5% 10% ... 100%
시작 중간요구사항 요구사항 결과
animation-name: 애니메이션의 이름을 설정
animation-fill-mode: 애니메이션이 끝난 후 어떻게 처리할지 설정
forwards: 애니메이션 키프레임이 100%(완료) 도달했을 때 마지막 프레임으로 유지
animation-direction: 애니메이션의 진행 방향을 정하는 속성
reverse: 반대 순서로 진행
alternate: 정해진 순서로 진행했다가 다시 반대 순서로 진행
reverse-alternate: 반대 순서로 진행했다가 다시 정해진 순서로 진행
animation-duration: 애니메이션이 일어나는 시간을 설정
animation-iteration-count: 애니메이션이 몇 번 반복할지 설정
infinite: 무한반복
숫자: 해당 숫자만큼 반복
animation-fill-mode: 애니메이션 미실행 시(종료 또는 대기) 요소의 스타일을 지정
animation-play-state: 애니메이션 재생 상태(재생 또는 중지)를 지정
[04_animation.html] @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
[05_animation.html] @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
CSS 우선순위 계산
1. 동일한 속성을 적용할 경우 나중에 적용한 것이 우선
2. 외부 스타일시트와 내부 스타일시트의 적용은 순서에 따라 나중에 적용한 것이 우선
3. 내부, 외부, 인라인 스타일시트 중 인라인을 우선시 적용
4. 계산식
- inline: 1000점 // 나중에 적용될 수 밖에 없어서 무조건 우선
- id 속성: 100점
- class, 속성선택자: 10점
- element: 1점 // div 이런거
5. !important를 적용하면 0순위 // 웬만하면 쓰지말라
1.transform.html
<!DOCTYPE html>
<html lang="en">
<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>transform</title>
<style>
p{
width: 600px;
padding: 20px;
border: 3px solid rgba(0,0,0,0.5)
}
#translate{
transform: translate(30px, 50px);
background-color: deeppink;
}
#rotate{
transform: rotate(60deg);
background-color: gold;
}
#scale{
transform: scale(1.5, 1.2);
background-color: orange;
}
#skew{
transform: skew(30deg,15deg);
background-color: yellowgreen;
}
#gradient{
background: pink; /*linear-gradient 지원하지 않는 브라우저를 위한 코드*/
/* 크롬, 엣지를 위한 코드*/
background: -webkit-linear-gradient(right, pink, gray);
/* 오페라를 위한코드 */
background: -o-liear-gradient(right, pink, gray);
/* 익스플로러를 위한코드 */
background: -ms-linear-gradient(right, pink, gray);
/* 파이어폭스를 위한 코드 */
background: -moz-linear-gradient(right, pink, gray);
/* CSS 표준 문법 코드 */
background: linear-gradient(right, pink, gray);
}
</style>
</head>
<body>
<h2>transform</h2>
<p id="original">original</p>
<p id="translate">translate</p>
<p id="rotate">rotate</p>
<p id="scale">scale</p>
<p id="skew">skew</p>
<p id="gradient">gradient</p>
</body>
</html>
2.transition.html
<!DOCTYPE html>
<html lang="en">
<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>transition1</title>
<style>
div{
width: 100px;
height: 100px;
float: left;
margin: 30px;
}
#bg-tr{
background-color: gold;
transition: background-color ease 1s;
}
#bg-tr:hover{
background-color: red;
}
#border-tr{
background-color: deeppink;
border: 3px dotted black;
transition: all linear 2s;
}
#border-tr:hover{
background-color: pink;
border: 3px dotted gray;
border-radius: 50%;
}
body{
background-color: rgb(66, 66, 66);
}
</style>
</head>
<body>
<h2>transition 1</h2>
<div id="bg-tr"></div>
<div id="border-tr"></div>
</body>
</html>
3.transition2.html
<!DOCTYPE html>
<html lang="en">
<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>transition 2</title>
<style>
h2{
text-align: center;
}
#ex{
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
border: 5px solid black;
padding: 30px;
}
p{
text-align: center;
padding-top: 50px;
font-weight: bold;
}
.box{
font-size:20px;
position:relative;
width: 140px;
height: 140px;
margin-bottom: 50px;
background-color: gold;
}
#ex:hover > .box{
transform: rotate(70000deg);
margin-left: 650px;
}
#no-delay{
transition-duration: 41s;
}
#delay{
transition-delay: 1s;
transition-duration: 40s;
}
</style>
</head>
<body>
<h2>transition 2</h2>
<div id="ex">
<div id="no-delay" class="box">
<p>(●'◡'●)</p>
</div>
<div id="delay"class="box">
<p>(┬┬﹏┬┬)</p>
</div>
</div>
</body>
</html>
4.animation1.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.box{
margin-top: 100px;
margin-left: 100px;
padding: 20px;
height: 60px;
animation-name:moving;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes moving{
from {
width: 200px;
background-color: gold;
opacity: 0.5;
transform: rotate(0deg);
}
to{
width: 400px;
background-color: greenyellow;
opacity: 1;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>animation 1</h2>
<div class="box">
<h3>CSS3 Animation</h3>
</div>
</body>
</html>
5.animaition_example.html
style.css
<!DOCTYPE html>
<html lang="en">
<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>animation1</title>
<link rel="stylesheet" href="./animation1.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="clock"></div>
<p>Clock</p>
</div>
<div class="box">
<div class="hourglass"></div>
<p>Hourglass</p>
</div>
<div class="box">
<div class="loader1"></div>
<p>Loader 1</p>
</div>
<div class="box">
<div class="loader2"></div>
<p>loader 2</p>
</div>
<div class="box">
<div class="loader3"></div>
<p>loader 3</p>
</div>
<div class="box">
<div class="loader4"></div>
<p>loader 4</p>
</div>
<div class="box">
<div class="loader5"></div>
<p>loader 5</p>
</div>
<div class="box">
<div class="loader6"></div>
<p>loader 6</p>
</div>
<div class="box">
<div class="loader7"></div>
<p>loader 7</p>
</div>
<div class="box">
<div class="loader8"></div>
<p>loader 8</p>
</div>
<div class="box">
<div class="loader9"></div>
<p>loader 9</p>
</div>
<div class="box">
<div class="loader10"></div>
<p>loader 10 </p>
</div>
</div>
</body>
</html>@import url(https://fonts.googleapis.com/css?family=Lato:300);
.container{
text-align: center;
background-color: #e74c3c;
overflow: hidden;
}
.box:nth-child(2n-1){
background-color: rgba(0,0,0,0.05);
}
.box{
display: inline-block;
height: 200px;
width: 33.3%;
float:left;
position: relative;
/*margin:0 -4px -5px -2px;*/
transition: all .2s ease;
}
.box p{
color: #777;
font-family: Lato,"Helvetica Neue" ;
font-weight: 300;
position: absolute;
font-size: 20px;
width: 100%;
height: 25px;
text-align: center;
bottom: 0px;
margin: 0;
top:160px;
background-color: #fff;
opacity: 0;
text-transform: uppercase;
transition: all .2s ease;
}
.box:hover p{
bottom:0px;
top:175px;
opacity: 1;
transition: all .2s ease;
z-index: 2;
}
/* MEDIA QUERIES */
@media (max-width: 700px){
.box{
width: 50%;
}
.box:nth-child(2n-1){
background-color: inherit;
}
.box:nth-child(4n),.box:nth-child(4n-3) {
background-color: rgba(0,0,0,0.05);
}
}
@media (max-width: 420px){
.box{
width: 100%;
}
.box:nth-child(4n),.box:nth-child(4n-3){
background-color: inherit;
}
.box:nth-child(2n-1){
background-color:rgba(0,0,0,0.05);
}
}
/* -------------- Clock -------------- */
.clock{
border-radius: 60px;
border: 3px solid #fff;
height: 80px;
width: 80px;
position: relative;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
}
.clock:after{
content: "";
position: absolute;
background-color: #fff;
top:2px;
left: 48%;
height: 38px;
width: 4px;
border-radius: 5px;
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
-webkit-animation: grdAiguille 2s linear infinite;
animation: grdAiguille 2s linear infinite;
}
@-webkit-keyframes grdAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes grdAiguille{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.clock:before{
content: "";
position: absolute;
background-color: #fff;
top:6px;
left: 48%;
height: 35px;
width: 4px;
border-radius: 5px;
-webkit-transform-origin: 50% 94%;
transform-origin: 50% 94%;
-webkit-animation: ptAiguille 12s linear infinite;
animation: ptAiguille 12s linear infinite;
}
@-webkit-keyframes ptAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes ptAiguille{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* -------------- Sablier -------------- */
.hourglass{
position: relative;
height: 80px;
width: 80px;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
border: 3px solid #fff;
border-radius: 80px;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: hourglass 2s ease-in-out infinite;
animation: hourglass 2s ease-in-out infinite;
}
.hourglass:before{
content: "";
position: absolute;
top:8px;
left: 18px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 37px 22px 0 22px;
border-color: #fff transparent transparent transparent;
}
.hourglass:after{
content: "";
position: absolute;
top: 35px;
left: 18px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 22px 37px 22px;
border-color: transparent transparent #fff transparent;
}
@-webkit-keyframes hourglass{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}
}
@keyframes hourglass{
0%{transform:rotate(0deg);}
100%{transform:rotate(180deg);}
}
/* -------------- Loader1 -------------- */
.loader1{
position: relative;
height: 80px;
width: 80px;
border-radius: 80px;
border: 3px solid rgba(255,255,255, .7);
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: loader1 3s linear infinite;
animation: loader1 3s linear infinite;
}
.loader1:after{
content: "";
position: absolute;
top: -5px;
left: 20px;
width: 11px;
height: 11px;
border-radius: 10px;
background-color: #fff;
}
@-webkit-keyframes loader1{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes loader1{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* -------------- loader2 -------------- */
.loader2{
position: relative;
width: 5px;
height: 5px;
top: 49%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 2.5px);
left: 49%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 2.5px);
background-color: #fff;
border-radius: 50px;
}
.loader2:before{
content: "";
position: absolute;
top: -38px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
border-radius: 0 50px 0px 0;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100% ;
-webkit-animation: loader2 1.5s linear infinite;
animation: loader2 1.5s linear infinite;
}
.loader2:after{
content: "";
position: absolute;
top: 2px;
right: 2px;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
border-radius: 0 0px 0px 50px;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, .1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0% ;
-webkit-animation: loader2 1.5s linear infinite;
animation: loader2 1.5s linear infinite;
}
@-webkit-keyframes loader2{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes loader2{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* -------------- loader3 -------------- */
.loader3{
position: relative;
width: 150px;
height: 20px;
top: 45%;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
left: 25%;
left: -webkit-calc(50% - 75px);
left: calc(50% - 75px);
}
.loader3:after{
content: "LOADING ...";
color: #fff;
font-family: Lato,"Helvetica Neue" ;
font-weight: 200;
font-size: 16px;
position: absolute;
width: 100%;
height: 20px;
line-height: 20px;
left: 0;
top: 0;
background-color: #e74c3c;
z-index: 1;
}
.loader3:before{
content: "";
position: absolute;
background-color: #fff;
top: -5px;
left: 0px;
height: 30px;
width: 0px;
z-index: 0;
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0% ;
-webkit-animation: loader3 10s ease-in-out infinite;
animation: loader3 10s ease-in-out infinite;
}
@-webkit-keyframes loader3{
0%{width: 0px;}
70%{width: 100%; opacity: 1;}
90%{opacity: 0; width: 100%;}
100%{opacity: 0;width: 0px;}
}
@keyframes loader3{
0%{width: 0px;}
70%{width: 100%; opacity: 1;}
90%{opacity: 0; width: 100%;}
100%{opacity: 0;width: 0px;}
}
/* -------------- loader4 -------------- */
.loader4{
position: relative;
width: 150px;
height: 20px;
top: 45%;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
left: 25%;
left: -webkit-calc(50% - 75px);
left: calc(50% - 75px);
background-color: rgba(255,255,255,0.2);
}
.loader4:before{
content: "";
position: absolute;
background-color: #fff;
top: 0px;
left: 0px;
height: 20px;
width: 0px;
z-index: 0;
opacity: 1;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0% ;
-webkit-animation: loader4 10s ease-in-out infinite;
animation: loader4 10s ease-in-out infinite;
}
.loader4:after{
content: "LOADING ...";
color: #fff;
font-family: Lato,"Helvetica Neue" ;
font-weight: 200;
font-size: 16px;
position: absolute;
width: 100%;
height: 20px;
line-height: 20px;
left: 0;
top: 0;
}
@-webkit-keyframes loader4{
0%{width: 0px;}
70%{width: 100%; opacity: 1;}
90%{opacity: 0; width: 100%;}
100%{opacity: 0;width: 0px;}
}
@keyframes loader4{
0%{width: 0px;}
70%{width: 100%; opacity: 1;}
90%{opacity: 0; width: 100%;}
100%{opacity: 0;width: 0px;}
}
/* -------------- loader5 -------------- */
.loader5{
position: relative;
width: 150px;
height: 20px;
top: 45%;
top: -webkit-calc(50% - 10px);
top: calc(50% - 10px);
left: 25%;
left: -webkit-calc(50% - 75px);
left: calc(50% - 75px);
background-color: rgba(255,255,255,0.2);
}
.loader5:after{
content: "LOADING ...";
color: #fff;
font-family: Lato,"Helvetica Neue" ;
font-weight: 200;
font-size: 16px;
position: absolute;
width: 100%;
height: 20px;
line-height: 20px;
left: 0;
top: 0;
}
.loader5:before{
content: "";
position: absolute;
background-color: #fff;
top: 0px;
height: 20px;
width: 0px;
z-index: 0;
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0% ;
-webkit-animation: loader5 7s ease-in-out infinite;
animation: loader5 7s ease-in-out infinite;
}
@-webkit-keyframes loader5{
0%{width: 0px; left: 0px}
48%{width: 100%; left: 0px}
50%{width: 100%; right: 0px}
52%{width: 100%; right: 0px}
100%{width: 0px; right: 0px}
}
@keyframes loader5{
0%{width: 0px; left: 0px}
48%{width: 100%; left: 0px}
50%{width: 100%; right: 0px}
52%{width: 100%; right: 0px}
100%{width: 0px; right: 0px}
}
/* -------------- loader6 -------------- */
.loader6{
position: relative;
width: 12px;
height: 12px;
top: 46%;
top: -webkit-calc(50% - 6px);
top: calc(50% - 6px);
left: 46%;
left: -webkit-calc(50% - 6px);
left: calc(50% - 6px);
border-radius: 12px;
background-color: #fff;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50% ;
-webkit-animation: loader6 1s ease-in-out infinite;
animation: loader6 1s ease-in-out infinite;
}
.loader6:before{
content: "";
position: absolute;
background-color: rgba(255, 255, 255, .5);
top: 0px;
left: -25px;
height: 12px;
width: 12px;
border-radius: 12px;
}
.loader6:after{
content: "";
position: absolute;
background-color: rgba(255, 255 ,255 ,.5);
top: 0px;
left: 25px;
height: 12px;
width: 12px;
border-radius: 12px;
}
@-webkit-keyframes loader6{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(180deg);}
}
@keyframes loader6{
0%{transform:rotate(0deg);}
50%{transform:rotate(180deg);}
100%{transform:rotate(180deg);}
}
/* -------------- loader7 -------------- */
.loader7{
position: relative;
width: 40px;
height: 40px;
top: 40%;
top: -webkit-calc(50% - 20px);
top: calc(50% - 20px);
left: 43%;
left: -webkit-calc(50% - 20px);
left: calc(50% - 20px);
background-color: rgba(255, 255, 255, .2);
}
.loader7:before{
content: "";
position: absolute;
background-color: #fff;
height: 10px;
width: 10px;
border-radius: 10px;
-webkit-animation: loader7 2s ease-in-out infinite;
animation: loader7 2s ease-in-out infinite;
}
.loader7:after{
content: "";
position: absolute;
background-color: #fff;
top: 0px;
left: 0px;
height: 40px;
width: 0px;
z-index: 0;
opacity: 1;
-webkit-animation: loader72 10s ease-in-out infinite;
animation: loader72 10s ease-in-out infinite;
}
@-webkit-keyframes loader7{
0%{left: -12px; top: -12px;}
25%{left:42px; top:-12px;}
50%{left: 42px; top: 42px;}
75%{left: -12px; top: 42px;}
100%{left:-12px; top:-12px;}
}
@keyframes loader7{
0%{left: -12px; top: -12px;}
25%{left:42px; top:-12px;}
50%{left: 42px; top: 42px;}
75%{left: -12px; top: 42px;}
100%{left:-12px; top:-12px;}
}
@-webkit-keyframes loader72{
0%{width: 0px;}
70%{width: 40px; opacity: 1;}
90%{opacity: 0; width: 40px;}
100%{opacity: 0;width: 0px;}
}
@keyframes loader72{
0%{width: 0px;}
70%{width: 40px; opacity: 1;}
90%{opacity: 0; width: 40px;}
100%{opacity: 0;width: 0px;}
}
/* -------------- loader8 -------------- */
.loader8{
position: relative;
width: 80px;
height: 80px;
top: 28%;
top: -webkit-calc(50% - 43px);
top: calc(50% - 43px);
left: 35%;
left: -webkit-calc(50% - 43px);
left: calc(50% - 43px);
border-radius: 50px;
background-color: rgba(255, 255, 255, .2);
border-width: 40px;
border-style: double;
border-color:transparent #fff;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50% ;
-webkit-animation: loader8 2s linear infinite;
animation: loader8 2s linear infinite;
}
@-webkit-keyframes loader8{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes loader8{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* -------------- loader9 -------------- */
.loader9:before{
content: "";
position: absolute;
top: 0px;
height: 12px;
width: 12px;
border-radius: 12px;
-webkit-animation: loader9g 3s ease-in-out infinite;
animation: loader9g 3s ease-in-out infinite;
}
.loader9{
position: relative;
width: 12px;
height: 12px;
top: 46%;
left: 46%;
border-radius: 12px;
background-color: #fff;
}
.loader9:after{
content: "";
position: absolute;
top: 0px;
height: 12px;
width: 12px;
border-radius: 12px;
-webkit-animation: loader9d 3s ease-in-out infinite;
animation: loader9d 3s ease-in-out infinite;
}
@-webkit-keyframes loader9g{
0%{ left: -25px; background-color: rgba(255, 255, 255, .8); }
50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
100%{ left:-25px; background-color: rgba(255, 255, 255, .8); }
}
@keyframes loader9g{
0%{ left: -25px; background-color: rgba(255, 255, 255, .8); }
50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
100%{ left:-25px; background-color: rgba(255, 255, 255, .8); }
}
@-webkit-keyframes loader9d{
0%{ left: 25px; background-color: rgba(255, 255, 255, .8); }
50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
100%{ left:25px; background-color: rgba(255, 255, 255, .8); }
}
@keyframes loader9d{
0%{ left: 25px; background-color: rgba(255, 255, 255, .8); }
50%{ left: 0px; background-color: rgba(255, 255, 255, .1);}
100%{ left:25px; background-color: rgba(255, 255, 255, .8); }
}
/* -------------- loader10 -------------- */
.loader10:before{
content: "";
position: absolute;
top: 0px;
left: -25px;
height: 12px;
width: 12px;
border-radius: 12px;
-webkit-animation: loader10g 3s ease-in-out infinite;
animation: loader10g 3s ease-in-out infinite;
}
.loader10{
position: relative;
width: 12px;
height: 12px;
top: 46%;
left: 46%;
border-radius: 12px;
-webkit-animation: loader10m 3s ease-in-out infinite;
animation: loader10m 3s ease-in-out infinite;
}
.loader10:after{
content: "";
position: absolute;
top: 0px;
left: 25px;
height: 10px;
width: 10px;
border-radius: 10px;
-webkit-animation: loader10d 3s ease-in-out infinite;
animation: loader10d 3s ease-in-out infinite;
}
@-webkit-keyframes loader10g{
0%{background-color: rgba(255, 255, 255, .2);}
25%{background-color: rgba(255, 255, 255, 1);}
50%{background-color: rgba(255, 255, 255, .2);}
75%{background-color: rgba(255, 255, 255, .2);}
100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10g{
0%{background-color: rgba(255, 255, 255, .2);}
25%{background-color: rgba(255, 255, 255, 1);}
50%{background-color: rgba(255, 255, 255, .2);}
75%{background-color: rgba(255, 255, 255, .2);}
100%{background-color: rgba(255, 255, 255, .2);}
}
@-webkit-keyframes loader10m{
0%{background-color: rgba(255, 255, 255, .2);}
25%{background-color: rgba(255, 255, 255, .2);}
50%{background-color: rgba(255, 255, 255, 1);}
75%{background-color: rgba(255, 255, 255, .2);}
100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10m{
0%{background-color: rgba(255, 255, 255, .2);}
25%{background-color: rgba(255, 255, 255, .2);}
50%{background-color: rgba(255, 255, 255, 1);}
75%{background-color: rgba(255, 255, 255, .2);}
100%{background-color: rgba(255, 255, 255, .2);}
}
@-webkit-keyframes loader10d{
0%{background-color: rgba(255, 255, 255, .2);}
25%{background-color: rgba(255, 255, 255, .2);}
50%{background-color: rgba(255, 255, 255, .2);}
75%{background-color: rgba(255, 255, 255, 1);}
100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10d{
0%{background-color: rgba(255, 255, 255, .2);}
25%{background-color: rgba(255, 255, 255, .2);}
50%{background-color: rgba(255, 255, 255, .2);}
75%{background-color: rgba(255, 255, 255, 1);}
100%{background-color: rgba(255, 255, 255, .2);}
}반응형
'웹 개발 > 🖥️ HTML&CSS' 카테고리의 다른 글
| CSS 적용안될때 해결법 (0) | 2024.07.01 |
|---|---|
| CSS | portfolio page만들기 (0) | 2022.11.06 |
| HTML&CSS | 다단레이아웃,flex,미디어쿼리,em,rem (0) | 2022.10.27 |
| HTML&CSS | 패딩,테두리,마진,박스사이징,디스플레이,폼,상대위치,고정위치,절대위치,z-index,float,clear (0) | 2022.10.27 |
| HTML&CSS | 선택자,텍스트,배경 (1) | 2022.10.27 |
