본문 바로가기
CSS

CSS-애니메이션(Animation) Icon 예제

by Hrin_0820 2020. 8. 24.

- animation icon 공통 스타일

    <style>
	.box{display: inline-block; width: 200px; height: 200px;
            background-color: mediumpurple;
            position: relative;
        }
    </style>

1. CLOCK & HOURGLASS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation-icon_clock＆hourglass</title>
    <style>
        /* animation-icon 공통 디자인 */
        .box{display: inline-block; width: 200px; height: 200px;
            background-color: mediumpurple;
            margin-right: 10px; position: relative;
        }
        /* clock 원 디자인 */
        .clock{
            width: 80px; height: 80px;
            border: 3px solid #fff; border-radius: 50%; /* 정원 */
            position: relative;
            top: 57px; left: 57px; /* 박스 안에서 가운데 위치 */
        }
        /* 시계의 긴 바늘 */
        .clock:after{
            content: "";
            width: 4px; height: 38px;
            border-radius: 5px;
            background: #fff;
            position: absolute;
            top: 3px; left: 48%;
            transform-origin: 50% 97%;
            animation: clocka 2s linear infinite;
        }
        @keyframes clocka{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        /* 시계의 짧은 바늘 */
        .clock:before{
            content: "";
            width: 4px; height: 35px;
            border-radius: 5px;
            background: #fff;
            position: absolute;
            top: 7px; left: 48%;
            transform-origin: 50% 94%;
            animation: clockb 12s linear infinite;
        }
        @keyframes clockb{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        
        /* hourglass 원 디자인 */
        .hourglass{
            width: 80px; height: 80px;
            border: 3px solid #fff; border-radius: 50%; /* 정원 */
            position: relative;
            top: 57px; left: 57px; /* 박스 안에서 가운데 위치 */
            transform-origin: 50% 50%;
            animation: hourglass 2s ease-in-out infinite;
        }
        /* 모래시계의 윗부분 */
        .hourglass:before{
            content: "";
            width: 0px; height: 0px;
            border-top: 37px solid #fff;
            border-right: 22px solid transparent;
            border-left: 22px solid transparent;
            /* border-bottom 없음 */
            position: absolute;
            top: 8px; left: 18px;
        }
        /* 모래시계의 아랫부분 */
        .hourglass:after{
            content: "";
            width: 0px; height: 0px;
            /* border-top 없음 */
            border-right: 22px solid transparent;
            border-bottom: 37px solid #fff;
            border-left: 22px solid transparent;
            position: absolute;
            top: 35px; left: 18px;
        }
        @keyframes hourglass{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(180deg)}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="clock"></div>
    </div>
    <div class="box">
        <div class="hourglass"></div>
    </div>
</body>
</html>
animation-icon_clock＆hourglass

 

2. LOADER 1, 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation-icon_loader1,2</title>
    <style>
        /* animation-icon 공통 디자인 */
        .box{display: inline-block; width: 200px; height: 200px;
            background-color: mediumpurple;
            position: relative; margin-right: 10px;
        }
        /* loader1 원 디자인 */
        .loader1{
            width: 80px; height: 80px;
            border: 3px solid rgba(255,255,255,0.7); 
            border-radius: 50%; /* 정원 */
            position: relative;
            top: 57px; left: 57px; /* 박스 안에서 가운데 위치 */
            transform-origin: 50% 50%;
            animation: loader1 3s linear infinite;
        }
        /* 움직이는 작은 원 */
        .loader1:after{
            content: "";
            width: 11px; height: 11px;
            border-radius: 10px;
            background: #fff;
            position: absolute;
            top: -6px; left: 25px;
        }
        @keyframes loader1{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        
        /* loader2 가운데 중심 원 디자인 */
        .loader2{
            width: 5px; height: 5px;
            background: #fff;
            border-radius: 50%; /* 정원 */
            position: relative;
            top: 49%; left: 49%; /* 박스 안에서 가운데 위치 */
        }
        /* right top 부채꼴 모양(1/4 원) */
        .loader2:before{
            content: "";
            width: 40px; height: 40px;
            background: rgba(255,255,255,0.1);
            border-top: 3px solid #fff;
            border-right: 3px solid #fff;
            border-radius: 0 50px 0 0;
            position: absolute; top:-38px;
            transform-origin: 0% 100%;
            animation: loader2 1.5s linear infinite;
        }
        /* left bottom 부채꼴 모양(1/4 원) */
        .loader2:after{
            content: "";
            width: 40px; height: 40px;
            background: rgba(255,255,255,0.1);
            border-bottom: 3px solid #fff;
            border-left: 3px solid #fff;
            border-radius: 0 0 0 50px;
            position: absolute; 
            top: 2px; right: 2px;
            transform-origin: 100% 0%;
            animation: loader2 1.5s linear infinite;
        }
        @keyframes loader2{
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="loader1"></div>
    </div>
    <div class="box">
        <div class="loader2"></div>
    </div>
</body>
</html>
animation-icon_loader1,2

 

3. LOADER 3, 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation-icon_loader3, 4</title>
    <style>
        /* animation-icon 공통 디자인 */
        .box{display: inline-block; width: 200px; height: 200px;
            background-color: mediumpurple;
            position: relative; margin-right: 10px;
        }
        /* loader3 배경의 사각형*/
        .loader3{
            width: 150px; height: 20px;
            position: relative;
            top:45%; left: 12%; /* 박스 안에서 가운데 위치 */
        }
        /* LOADING 텍스트 박스 */
        .loader3:after{
            content: "LOADING ...";
            width: 100%; height: 20px;
            line-height: 20px; text-align: center;
            color: #fff; font-size: 16px;
            font-weight: 200;
            background-color: blueviolet;
            position: absolute;
            top: 0; left: 0; z-index: 1;
        }
        /* 로딩 게이지 박스 */
        .loader3:before{
            content: "";
            width: 0; height: 30px;
            background: #fff;
            position: absolute;
            top: -5px; left: 0; z-index: 0;
            opacity: 1;
            transform-origin: 100% 0%;
            animation: loader3 10s ease-in-out infinite;
        }
        @keyframes loader3{
            0%{width: 0; opacity: 0}
            70%{width: 100%; opacity: 1}
            90%{width: 100%; opacity: 0}
            100%{width: 0; opacity: 0}
        }
        
        /* loader4 배경의 사각형*/
        .loader4{
            width: 150px; height: 20px;
            background: rgba(255,255,255,0.2);
            position: relative;
            top:45%; left: 12%; /* 박스 안에서 가운데 위치 */
        }
        /* 로딩 게이지 박스 */
        .loader4:before{
            content: "";
            width: 0; height: 20px;
            background: #fff;
            position: absolute;
            top: 0; left: 0; z-index: 0;
            opacity: 1;
            transform-origin: 100% 0%;
            animation: loader4 10s ease-in-out infinite;
        }
        /* LOADING 텍스트 박스 */
        .loader4:after{
            content: "LOADING ...";
            width: 100%; height: 20px;
            line-height: 20px; text-align: center;
            color: #fff; font-size: 16px;
            font-weight: 200;
            position: absolute;
            top: 0; left: 0;
        }
        @keyframes loader4{
            0%{width: 0; opacity: 1}
            70%{width: 100%; opacity: 1}
            90%{width: 100%; opacity: 0}
            100%{width: 0; opacity: 0}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="loader3"></div>
    </div>
    <div class="box">
        <div class="loader4"></div>
    </div>
</body>
</html>
animation-icon_loader3, 4

 

4. LOADER 5, 6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation-icon_loader5, 6</title>
    <style>
        /* animation-icon 공통 디자인 */
        .box{display: inline-block; width: 200px; height: 200px;
            background-color: mediumpurple;
            position: relative; margin-right: 10px;
        }
        /* loader5 배경의 사각형*/
        .loader5{
            width: 150px; height: 20px;
            background: rgba(255,255,255,0.2); 
            position: relative;
            top:45%; left: 12%; /* 박스 안에서 가운데 위치 */
        }
        /* LOADING 텍스트 박스 */
        .loader5:after{
            content: "LOADING ...";
            width: 100%; height: 20px;
            line-height: 20px; text-align: center;
            color: #fff; font-size: 16px;
            font-weight: 200;
            position: absolute;
            top: 0; left: 0;
        }
        /* 로딩 게이지 박스 */
        .loader5:before{
            content: "";
            width: 0; height: 20px;
            background: #fff;
            position: absolute;
            top: 0; z-index: 0;
            transform-origin: 100% 0%;
            animation: loader5 7s ease-in-out infinite;
        }
        @keyframes loader5{
            0%{width: 0; left: 0;}
            45%{width: 100%; left: 0;}
            50%{width: 100%; right: 0}
            75%{width: 100%; right: 0}
            100%{width: 0; right: 0}
        }
        
        /* loader6 정중앙 원 디자인 */
        .loader6{
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            background: #fff;
            position: relative;
            top:46%; left: 46%; /* 박스 안에서 가운데 위치 */
            transform-origin: 50% 50%;
            animation: loader6 1s ease-in-out infinite;
        }
        
        /* 왼쪽 원 디자인 */
        .loader6:before{
            content: "";
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            background: rgba(255,255,255,0.5);
            position: absolute;
            top: 0; left: -25px;
        }
        /* 오른쪽 원 디자인 */
        .loader6:after{
            content: "";
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            background: rgba(255,255,255,0.5);
            position: absolute;
            top: 0; left: 25px;
        }
        @keyframes loader6{
            0%{transform: rotate(0deg)}
            50%{transform: rotate(180deg)}
            100%{transform: rotate(180deg)}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="loader5"></div>
    </div>
    <div class="box">
        <div class="loader6"></div>
    </div>
</body>
</html>
animation-icon_loader5, 6

 

5. LOADER 7, 8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation-icon_loader7, 8</title>
    <style>
        /* animation-icon 공통 디자인 */
        .box{display: inline-block; width: 200px; height: 200px;
            background-color: mediumpurple;
            position: relative; margin-right: 10px;
        }
        /* loader7 배경의 사각형*/
        .loader7{
            width: 40px; height: 40px;
            background: rgba(255,255,255,0.2); 
            position: relative;
            top: 40%; left: 41%; /* 박스 안에서 가운데 위치 */
        }
        /* 움직이는 원 */
        .loader7:before{
            content: "";
            width: 10px; height: 10px;
            border-radius: 50%; /* 정원 */
            background: #fff;
            position: absolute;
            animation: loader7b 2s ease-in-out infinite;
        }
        /* 로딩 게이지 박스 */
        .loader7:after{
            content: "";
            width: 0; height: 40px;
            background: #fff;
            position: absolute;
            top: 0; left: 0; z-index: 0;
            opacity: 1;
            animation: loader7a 10s ease-in-out infinite;
        }
        @keyframes loader7b{
            0%{left: -12px; top: -12px;}
            25%{left: 43px; top: -12px;}
            50%{left: 43px; top: 43px;}
            75%{left: -12px; top: 43px;}
            100%{left: -12px; top: -12px;}
        }
        @keyframes loader7a{
            0%{width: 0; opacity: 1}
            70%{width: 100%; opacity: 1}
            90%{width: 100%; opacity: 0}
            100%{width: 0; opacity: 0}
        }
        
        /* loader8 디자인 */
        .loader8{
            width: 80px; height: 80px;
            border-radius: 50%; /* 정원 */
            background: rgba(255,255,255,0.2);
            border-width: 40px;
            border-style: double;
            border-color: transparent #fff; /* top, bottom 투명 */
            box-sizing: border-box;
            position: relative;
            top: 28%; left: 30%; /* 박스 안에서 가운데 위치 */
            transform-origin: 50% 50%;
            animation: loader8 2s linear infinite;
        }
        @keyframes loader8{
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="loader7"></div>
    </div>
    <div class="box">
        <div class="loader8"></div>
    </div>
</body>
</html>
animation-icon_loader7, 8
>

6. LOADER 9, 10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation-icon_loader9, 10</title>
    <style>
        /* animation-icon 공통 디자인 */
        .box{display: inline-block; width: 200px; height: 200px;
            background-color: mediumpurple;
            position: relative; margin-right: 10px;
        }
        /* loader9 정중앙 원 디자인 */
        .loader9{
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            background: #fff;
            position: relative;
            top:46%; left: 46%; /* 박스 안에서 가운데 위치 */
        }
        
        /* 왼쪽 원 디자인 */
        .loader9:before{
            content: "";
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            position: absolute;
            top: 0; 
            animation: loader9b 3s ease-in-out infinite;
        }
        /* 오른쪽 원 디자인 */
        .loader9:after{
            content: "";
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            position: absolute;
            top: 0; 
            animation: loader9a 3s ease-in-out infinite;
        }
        @keyframes loader9b{
            0%{left: -25px; background: rgba(255,255,255,0.8)}
            50%{left: 0; background: rgba(255,255,255,0.1)}
            100%{left: -25px; background: rgba(255,255,255,0.8)}
        }
        @keyframes loader9a{
            0%{left: 25px; background: rgba(255,255,255,0.8)}
            50%{left: 0; background: rgba(255,255,255,0.1)}
            100%{left: 25px; background: rgba(255,255,255,0.8)}
        }
        
        /* loader10 첫번째(왼쪽) 원 디자인 */
        .loader10:before{
            content: "";
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            position: absolute;
            top: 0; left: -25px;
            animation: loader10b 3s ease-in-out infinite;
        }
         /* loader10 두번째(중앙) 원 디자인 */
        .loader10{
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            background: #fff;
            position: relative;
            top:46%; left: 46%; /* 박스 안에서 가운데 위치 */
            animation: loader10 3s ease-in-out infinite;
        }
        /* loader10 세번째(오른쪽) 원 디자인 */
        .loader10:after{
            content: "";
            width: 12px; height: 12px;
            border-radius: 50%; /* 정원 */
            position: absolute;
            top: 0; left: 25px;
            animation: loader10a 3s ease-in-out infinite;
        }
        @keyframes loader10b{
            0%{background: rgba(255,255,255,0.2)}
            25%{background: rgba(255,255,255,1)}
            50%{background: rgba(255,255,255,0.2)}
            75%{background: rgba(255,255,255,0.2)}
            100%{background: rgba(255,255,255,0.2)}
        }
        @keyframes loader10{
            0%{background: rgba(255,255,255,0.2)}
            25%{background: rgba(255,255,255,0.2)}
            50%{background: rgba(255,255,255,1)}
            75%{background: rgba(255,255,255,0.2)}
            100%{background: rgba(255,255,255,0.2)}
        }
        @keyframes loader10a{
            0%{background: rgba(255,255,255,0.2)}
            25%{background: rgba(255,255,255,0.2)}
            50%{background: rgba(255,255,255,0.2)}
            75%{background: rgba(255,255,255,1)}
            100%{background: rgba(255,255,255,0.2)}
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="loader9"></div>
    </div>
    <div class="box">
        <div class="loader10"></div>
    </div>
</body>
</html>
animation-icon_loader9, 10
저작자표시

'CSS' 카테고리의 다른 글

CSS-요소의 정렬 : float  (0) 2020.08.26
CSS-다단편집(multi-column)  (0) 2020.08.24
CSS-애니메이션(Animation)  (0) 2020.08.24
CSS-속성전환(transitions)  (0) 2020.08.24
CSS-Transform  (0) 2020.08.24

관련글

댓글

티스토리툴바