가로로 흐르는 텍스트 css
본문
Html
<div class="flow-container">
<div class="flow-text">
<div class="flow-wrap">you are a shield around me, O LORD</div>
<div class="flow-wrap">you are a shield around me, O LORD</div>
</div>
</div>
style.css
.flow-text {
display: flex;
flex: 0 0 auto;
white-space: nowrap;
overflow: hidden;
transition: 0.3s;
font-size: 6.5rem;
font-weight:bold;
color: #e2e2e2;
}
.flow-wrap {
animation: textLoop 40s linear infinite;
padding-right: 1.4881vw;
}
@keyframes textLoop {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
댓글목록
등록된 댓글이 없습니다.