개발나라 스용공주

[HTML/CSS] 로딩 버튼 만들기 실습 본문

WEB/HTML & CSS

[HTML/CSS] 로딩 버튼 만들기 실습

스용공주 2024. 11. 1. 06:52
728x90
728x90

이번 글은 로딩 버튼 애니메이션 만들기다.

[ 실행 결과 ]

 

[ 애니메이션 만들기 ]

투명도 조절로 사라지는 효과를 주고 크기가 변화하면서 축소하며 사라지는 느낌의 애니메이션이다.

@keyframes ani{
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

 

 

[ 애니메이션 적용하기 ]

animation: ani 1s linear infinite;

 

[ 딜레이를 이용한 효과 ]

애니메이션 딜레이 효과를 통해 번지듯이 사라진다.

각각 0초, 0.2초, 0.4초 이렇게 딜레이 시간에 차이를 줬다.

animation-delay : 0.2s;

 

 

[ html ]

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css\style.css">
</head>
<body>

    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <script src="script\jquery-1.12.4.js"></script>
    <script src="script\custom.js"></script>

</body>
</html>

 

[ css ]

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.loading span {
    display: inline-block;
    width : 20px;
    height : 20px;
    border-radius: 50%;
    animation: loading 1s linear infinite;
}
.loading span:nth-child(1) {
    animation-delay: 0s;
    background-color: palevioletred;
}
.loading span:nth-child(2) {
    animation-delay: 0.2s;
    background-color: palegoldenrod;
}
.loading span:nth-child(3) {
    animation-delay: 0.4s;
    background-color: palegreen;
}

@keyframes loading {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[HTML/CSS] 그림자 효과 활용하기  (0) 2024.11.01
[HTML/CSS] transform 올바른 작성법  (0) 2024.11.01
[HTML/CSS] css함수 - calc 퀄크  (0) 2024.11.01
[HTML/CSS] position 특징  (0) 2024.11.01
[HTML/CSS] position 속성 사용 시 요소 중앙정렬하기 - transform과 translate  (0) 2024.11.01
'WEB/HTML & CSS' Related Articles more
Comments