[CSS] 무한히 흐르는 텍스트

 

    <style>
        .marquee{
            width: 500px;
            background-color: black;
            white-space: nowrap;
            overflow: hidden;
        }
        .marquee-text {
            display: inline-block;
            width: 260px;
            font-size: 24px;
            font-weight: bold;
            color: #ffd000;
            animation: scroll 3s linear infinite;
        }
          
        .marquee-text:before {
            content: "SERVICE ERROR";
        }
          
        @keyframes scroll {
            100% {
              transform: translateX(-100%);
            }
        }
    </style>

    <div class="marquee">
        <div class="marquee-text"></div><div class="marquee-text"></div><div class="marquee-text"></div>
    </div>

 

 

class marquee-text안에 before요소로 텍스트를 넣어서

애니메이션 효과, infinite를 줘서 무한히 흐르게 한다

 

white-space : nowrap 으로 줄넘김을 방지한다. 하지 않으면 줄넘김이 자동으로 돼서 글자가 가로로 배치되는게 아니라 부모의 width값보다 넘어가면 글자가 밑으로 배치되게 된다.

 

overflow hidden을 적용해서 글자가 검은색의 배경을 가진 부모요소 안에만 보이게 한다

 

 

 

코드파일

index.html 안에 css랑 html코드 둘 다 들어가있음

 

index.zip

0.00MB