본문 바로가기
☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 _ 35 로딩 애니메이션

by 조반짝 2023. 6. 16.
728x90
반응형

<html>

박스 3개 만들기

#wrap > .container > .box > .clock / p-clock

<css>

박스 영역 잡아주기

● display: inline-block 

  인라인에는 본인 가지고 있는 여백이 있기 때문에 인라인블록을 해도 옆으로 나열되지 않음

  이런 경우에는 float으로 옆으로 나열해준다.

● float을 띄우면 부모가 높이를 잃게 된다. 

   >> 부모에 clearfix 나 overflow: hidden을 적용해준다. 

박스를 개별로 수정해주기

.box:nth-child(1){} / .box:nth-child(2){} ....

>> 하지만 박스 갯수가 많아지게 되면 각각 수정하기 시간이 오래걸린다.

박스를 짝수, 홀수로 수정해주기

짝수 .box:nth-of-type(2n){}

홀수  .box:nth-of-type(2n-1){}

p태그 편집하기

p태그 올라오는 동작

<html>

박스 3개 추가해주기

.box 에 overflow: hidden 을 해주어야 p태그가 가려진다.

마우스 오버시에 다시 p태그가 올라온다.

 

* 반응형

@media 

max-최대값

@media(max-width:700px){
    .box{width:50%;}
    .box:nth-of-type(2n-1){
        background-color: inherit;
    }
    .box:nth-of-type(4),.box:nth-of-type(4n-3){
        background-color: rgba(255,255,255,0.1);
    }

너비 최대 700px 일때, 박스 너비를 2등분하겠다.

백그라운드 컬러를 container에 넣었던 컬러를 상속받는다.

 

박스를 2등분으로 나눠서 박스를 2등분만 보겠다.

background-color:inherit 을 하면 부모에 넣었던 컬러를 상속받게 되어 .box:nth-of-type(2n-1)컬러값이 없어지고 컬러값이 초기화됨

ㅇ

반응형 안했을 때

▼

반응형 최대 700px 일때

2n 승은 짝수

2n-1 승은 홀수

시계 만들기

.click 편집해주기

 

click 모양 잡아주기

.click 위치잡아주기

.click 가상요소(시계 분침) 만들어 주기

.click 가상요소 애니메이션 넣어주기

animation: clock1 2s linear infinite ;

@keyframes clock1{}

.clock2 가상요소 (시침) 만들기

모래시계 만들기

모래시계 모양 잡아주기

모래시계 위치 잡아주기

 

[계산기로 위치 잡아주는 방법]

● calc(50% - 43px) >> top의 중심(50%) - (40+3(border사이즈))

**반드시 연산자 앞뒤를 띄워써줘야한다.

모래시계 가상요소(모래시계) 만들어주기

border를 이용해서 삼각형을 만들어 줄 수 있다.

블랙과 그린을 투명으로 변경해줘야 삼각형이 살아있음

모래시계 완성

모래시계 Y축으로 돌리기

모래시계 완성

.loader 에 원 border 따라서 원이 돌아가게 하는 애니메이션 효과

transform - origin 할 필요없이 .loader1에 애니메이션  넣으면 원을 기준으로 가상요소가 돌아가게 된다.

(boder 원이 돌아가게 하면 된다.)

boder 컬러값을 투명으로 해주면 가상요소 원이 혼자돌아가는 것 처럼 보인다.

loader2 만들기

 

.loader2 모양, 위치 잡아주기

가상요소1 만들어주기

가상요소1과 마찬가지로 가상요소 2 만들어주기

 

레이더 모양 만들기 

origin 사용하여 애니메이션 효과주기

 

가상요소 1 keyframes {transform: rotate} 지정

가상요소1이 중심축없이 돌아가게된다. 

 가상요소1 에서 중심축을 잡아주어야한다

tranform-origin: 0% 100%; 로 지정해준다.

가상요소2 에서 tranform-origin: 100% 0%; 로 지정해준다.

로딩바 만들기

.loader3 모양, 위치 잡아주기

가상요소 1 만들기

가상요소 2만들기

 

애니메이션 효과

 

애니메이션효과 완성!!

 

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div class="box">
                <div class="clock"></div>
                <p>Clock</p>
            </div>
            <div class="box">
                <div class="sandglass"></div>
                <p>snadglass</p>
            </div>
            <div class="box">
                <div class="loader1"></div>
                <p>loader1</p>
            </div>
            <div class="box">
                <div class="loader2"></div>
                <p>loader2</p>
            </div>
            <div class="box">
                <div class="loader3"></div>
                <p>loader3</p>
            </div>
            <div class="box">
                <div class="loader4"></div>
                <p>loader4</p>
            </div>
        </div>
    </div>
</body>
</html>

<css>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <div class="container">
            <div class="box">
                <div class="clock"></div>
                <p>Clock</p>
            </div>
            <div class="box">
                <div class="sandglass"></div>
                <p>snadglass</p>
            </div>
            <div class="box">
                <div class="loader1"></div>
                <p>loader1</p>
            </div>
            <div class="box">
                <div class="loader2"></div>
                <p>loader2</p>
            </div>
            <div class="box">
                <div class="loader3"></div>
                <p>loader3</p>
            </div>
            <div class="box">
                <div class="loader4"></div>
                <p>loader4</p>
            </div>
        </div>
    </div>
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드_37 Fade In & Fade Out  (0) 2023.06.16
비주얼 스튜디오 코드 36_ 웹표준) header  (0) 2023.06.16
비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제  (0) 2023.06.15
비주얼 스튜디오 코드 33 _ 프로필 카드 만들기  (0) 2023.06.15
비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기  (0) 2023.06.14

관련글

티스토리툴바