[CSS] 좌측으로 무한 흘러가는 플로팅 효과 marquee를 CSS로 구현

좌측으로 흘러가는 텍스트 효과를 javaScript 없이 CSS transform으로 구현하기

 

이미지 형식 marquee가 좌측으로 무한 플로팅

 

디바이스 width를 2560px까지 맞춰야하므로 이미지 사이즈는 3000px 정도로 준비

 

 

 

HTML

<div class="float_wrap">
	<div class="float_conbox">
		<img src="marquee_text.png" alt="">
		<img src="marquee_text.png" alt="">
	</div>
</div>

 

CSS

.float_wrap{
    overflow-x: hidden;
    position: relative;
    height: 120px;
    background-color: #37BF92;
}
.float_conbox{
    position: absolute;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite;
}
.float_conbox img{
    max-width: unset;
}
@keyframes marquee{
    from{transform: translateX(0);}
    to{transform: translateX(-50%);}
}