css만으로 marquee 애니메이션 구현

흐르는 글자 애니메이션을 marquee라고 한다.

굳이 애니메이션을 넣지 않아도 된다. 

css로만 구현하는게 생각보다 가볍다.

물론... 옛날에 유행했던거라 더 이상 쓰지 않을 것 같지만 메모만 하기..

 

포인트는 같은 텍스트를 두 번 넣고 하나의 텍스트가 width:100% 차지 하게 하는 것 

@keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
  }​

 .history-top{
        position:absolute;
        left:50%;top:0;
        width:1600px;
        height: 100%; 
        margin-left:-800px;
        // outline:1px solid white;
        overflow: hidden;
        >div {
            display:flex;
            justify-content: flex-start;
            width: 200%;
            height: 30px;
          
            position: absolute;
            overflow: hidden;
          
            animation: marquee 23s linear infinite;

            color:#fff;font-size: 12px;font-weight: 400;line-height:35px;text-align: center;white-space: nowrap;
             >span {
                 /*슬라이드 한 뭉탱이 ^^*/
                 height:100%;
                width: 50%;
                display: block;
               
                span.slideinr{
                /*슬라이드 낱장을 의미*/
                    display:block;
                    float:left;
                    width: 200px;
                    height:100%;
                     >span{
                       font-size: 12px;font-weight: 400;line-height:35px;text-align: center;white-space: nowrap;
                     }
                     
                    span.bluegreen{color:#42b1d3;}
                    &:nth-child(3n){span.bluegreen{color:#42b1d3;}}
                    &:nth-child(3n + 1){span.bluegreen{color:#1a7cf7;}}
                    &:nth-child(3n + 2){span.bluegreen{color:#0daa14;}}
                    span.btcprice{ color:#fff;margin:0 5px 0 6px;}
                    span.gray{color:#909090;}
                }

                
              } 
        }
    }
}

/*end of history slide*/