본문 바로가기
개발공부 일지/HTML CSS

CSS) Clip-Path 속성으로 둘로 쪼개지는 글자 만들기

by Box Cat 2024. 7. 14.
728x90
반응형

 

Clip-Path 속성은 CSS의 일부분을 잘라낼 수 있는 CSS의 속성이다.

 

마우스 드래그를 통해 Clip-Path 생성하는 사이트: https://bennettfeely.com/clippy/

 

예시)

CSS animatin, transitions and transforms
loading loading
 

 

 
 
 
 
 
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS animatin, transitions and transforms</title>

    <style>
        @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);

        .container {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Raleway', Arial, sans-serif;
        }

        .loader {
            width: 300px;
            height: 60px;
            border: 7px solid #0a3d62;
            border-radius: 10px;
            text-align: center;
            line-height: 60px;
            position: relative;
            overflow: hidden;
        }

        .words {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 48px;
            text-transform: uppercase;
            font-weight: 600;
        }

        .top-half {
            color: #ee5253;
            animation: split 4s linear infinite;
            clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
        }

        .bottom-half {
            color: #0a3d62;
            animation: split 4s linear infinite reverse;
            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
        }

        @keyframes split {
            0% {
                transform: translateX(100%);
            }

            40% {
                transform: translateX(0);
            }

            60% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }
    </style>

</head>

<body>

    <div class="container">
        <div class="loader">
            <span class="words top-half">loading</span>
            <span class="words bottom-half">loading</span>
        </div>
    </div>

</body>

</html>
 
 
728x90
반응형

댓글