천체 꼬리표에 대한 대체

Question

link에 따라 천막은 사용되지 않습니다.

스크롤 텍스트에 대해 제안 된 다음 해결책은 무엇입니까? CSS 애니메이션이 가능한 해결책입니다. 그러나 그것을 어떻게 위에서 아래로 또는 아래에서 위로 작동하게 만드는지.

JSFIDDLE

.marquee { 
    width: 450px; 
    margin: 0 auto; 
    overflow: hidden; 
    white-space: nowrap; 
    box-sizing: border-box; 
    animation: marquee 50s linear infinite; 
} 

Answer 1

수직 움직이는 키 프레임 사용 :

을

.marquee { 
 
    position: relative; 
 
    animation: marquee 2s linear infinite; 
 
} 
 
@keyframes marquee { 
 
    0% { 
 
     top: 10em 
 
    } 
 
    100% { 
 
     top: -2em 
 
    } 
 
}

<p class="marquee">Marquee</p>