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

비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기

조반짝 2023. 6. 14. 16:51
728x90
반응형

● cubic-bezier

https://cubic-bezier.com/#.17,.67,.83,.67

 

cubic-bezier.com

 

cubic-bezier.com

베지에 곡선을 이용해서 이벤트 속도를 조절할 수가 있다.

 

선 화면 중앙에 보내기

애니메이션 주기

●animation : bar 2s ease-in-out infinite;

bar : 애니메이션 이름

2s : 수행시간

ease-in-out : 수행시간 동안 빠르기를 조절해주는 명령어

infinite : 수행할 갯수 ( 무한정)

● @keyframes : 움직이는 값을 줄때 사용한다.

선이 제자리에서 움직인다.

0%에서 bar 높이값이 0, 회전 0 에서 시작

25%에서 

진행속도 대신에 베지에 곡선을 이용해서 속도를 조절할 수 있다.

● cubic-bezier(.초) : 베지에 곡선을 사용해서 속도가 자연스럽게 표현될 수 있다.

큐빅 베지에 곡선 사이트에서 복사해서 사용

확대하는 표현에도 베지에 곡선을 통해 사용할 수 있다.

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>베지에 곡선 사용하기</title>
    <style>

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
        }

        .bar{
            width: 5px;
            height: 400px;
            background-color: #fff;

            /* 모든 화면을 쓰겠다. / 정중앙에 놓는 또다른 명령어다 */
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;

            animation: bar 2s cubic-bezier(.24,1.19,.18,.18) 10;
            /* 진행속도
            ease : 서서히 시작해서 중간에 빨라졌다가 서서히 끝나게 해주는 명령어
            ease-in : 천천히 시작함
            ease-out : 천천히 끝남
            ease-in-out : 천천히 시작해서 천천히 끝남
            linear : 일정한 속도로 
            */

            /*  bar : 애니메이션 이름
                2s : 수행 시간
                ease-in-out : 수행시간 동안 빠르기를 조절해주는 명령어
                infinite : 수행할 갯수(무한정)
            */
       
        }

        @keyframes bar{
            0%{transform: rotate(0); height: 0;}
            25%{transform: rotate(0); height: 400px;}
            75%{transform: rotate(180deg); height: 400px;}
            100%{transform: rotate(180deg); height: 0px;}
        }

    </style>
</head>
<body>
    <div class="bar"></div>
</body>
</html>

 

 

중심축을 기준으로 원 2개를 양쪽에서 회전해주기

 

사각형(loading) 정중앙에 보내기

원과 사각형을 만들어준다.

 

사각형(loading)의 중심축을 기준으로 원이 360도 돌아간다.

 

<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>
    <style>
        body{
            height: 100vh;
            background-color: #764ba2;
        }

        .loading{
            width: 20px;
            height: 100px;
            /* background-color: #fff; */
            /* border: 1px solid #fff; */

            /* 사각형 정중앙에 보내기 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

            /* 중심점을 기준으로 해야하기 때문에 애니메이션을 로딩에다가준다. */
            animation: loading cubic-bezier(.32,1.56,.59,.7) 3s 100;
        }
        @keyframes loading{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }

        .loading .circle1{
            width: 20px;
            height: 20px;
            background-color: #fff;
            display: block;
            border-radius: 50%;
        }
        .loading .circle2{
            width: 20px;
            height: 20px;
            background-color: #fff;
            display: block;
            border-radius: 50%;
            
            /* 원 밑으로 보내기 */
            margin-top: 60px;


        }

    </style>
</head>
<body>
    <div class="loading">
        <span class="circle1"></span>
        <span class="circle2"></span>
    </div>
</body>
</html>

wave 애니메이션 

 

● display : flex 값으로 세로로 나열된 원을 옆으로 보내주기

● 원을 화면 중앙에 보내주기(row값의 부모인 body에 넣어준다.)

  display : flex

  align-item : center

  justify-content: center

 

   

애니메이션 효과

animation: 이름정해주기(spin) 1s liner infinite

 

원 크기 변화주기

원이 커졌다 작아졌다한다.

원 회전시키기

원의 중심축을 정해줘야한다.

transform-origin: top center;

 

>> 모든 원의 똑같이 회전한다.

원이 똑같이 회전하기 때문에 각 원에 시간차를 주면 웨이브 효과를 줄 수 있다.

● animation-delay: 애니메이션 시간차 주기

원이 회전하면서 웨이브효과가 나타난다.

 

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>원들의 댄스</title>
    <style>
        body{
            height: 100vh;
            background-image: linear-gradient(120deg, #d41c79 0%, #7a1c4b);
            
            /* row 중앙으로 보내주기 */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .row{
            display: flex;
            /* 원을 옆으로 띄워줌 */
        }
        .circle{
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            /* 원 간격 띄우기 */
            margin: 5px 10px;

            animation: spin 1s linear infinite;

            /* 회전하기 위한 중심점 주기 */
            transform-origin: top center;
        
        }

        @keyframes spin{
            0%{transform: rotate(0deg) scale(1.1);}
            50%{transform: rotate(180deg) scale(0.9);}
            100%{transform: rotate(360deg) scale(1.1);}
        }

        .row:nth-child(1) .circle{animation-delay: 100ms;}
        .row:nth-child(2) .circle{animation-delay: 200ms;}
        .row:nth-child(3) .circle{animation-delay: 300ms;}
        .row:nth-child(4) .circle{animation-delay: 400ms;}
        .row:nth-child(5) .circle{animation-delay: 500ms;}
        .row:nth-child(6) .circle{animation-delay: 600ms;}
        .row:nth-child(7) .circle{animation-delay: 700ms;}
        .row:nth-child(8) .circle{animation-delay: 800ms;}
        .row:nth-child(9) .circle{animation-delay: 900ms;}
        .row:nth-child(10) .circle{animation-delay: 1000ms;}
        .row:nth-child(11) .circle{animation-delay: 1100ms;}
        .row:nth-child(12) .circle{animation-delay: 1200ms;}
        .row:nth-child(13) .circle{animation-delay: 1300ms;}
        .row:nth-child(14) .circle{animation-delay: 1400ms;}
        .row:nth-child(15) .circle{animation-delay: 1500ms;}

    </style>
</head>
<body>
    <div class="circles">
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="row">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

    </div>
</body>
</html>
728x90
반응형
저작자표시 비영리 변경금지

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

비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제  (0) 2023.06.15
비주얼 스튜디오 코드 33 _ 프로필 카드 만들기  (0) 2023.06.15
비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너  (0) 2023.06.14
비주얼 스튜디오 코드 30 _ 마우스오버 효과 ⑤  (0) 2023.06.14
비주얼 스튜디오 코드 29 _ 마우스오버 효과 복습  (0) 2023.06.14

'☭DEVELOPER/#2 웹개발(자바기반 풀스택)'의 다른글

  • 현재글비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기

관련글

티스토리툴바