HTML, CSS 무한 롤링, 흐르는 텍스트

마우스 오버시 텍슽 색상이 변하면서 일시 정지됩니다.

 

CSS 스타일

 .marquee-text {
	  display: flex;
      flex: 0 0 auto;
      white-space: nowrap;
      overflow: hidden;
      transition: 0.3s;
      font-size: 2rem;
      font-weight:300;
      color: #000000;
  }
  .marquee-text:hover {
    color: #999999;
  }
  .marquee-text:hover .marquee-wrap {
    animation-play-state: paused;
    cursor: pointer;
  }
  .marquee-wrap {
    animation: textLoop 10s 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);
    }
  }

 

 

HTML

<div class="container">
     <div class="marquee-text">
        <div class="marquee-wrap">무한루프로 흐르는 텍스트 </div>
        <div class="marquee-wrap">마우스 오버시 색상이 변해요 </div>
        <div class="marquee-wrap">CCS스타일과 HTML로 구현</div>
        <div class="marquee-wrap">무한루프로 흐르는 텍스트 </div>
     </div>
</div>