>source

CodePen에서 이 슬라이더를 찾았습니다. https://codepen.io/gvzq/pen/OJVvzJz

HTML:

<div class="container h-100">  <div class="row align-items-center h-100">    <div class="container rounded">      <h1 class="text-center">Featured in:</h1>      <div class="slider">        <div class="logos">          <i class="fab fa-js fa-4x"></i>          <i class="fab fa-linkedin-in fa-4x"></i>          <i class="fab fa-dribbble fa-4x"></i>          <i class="fab fa-medium-m fa-4x"></i>          <i class="fab fa-github fa-4x"></i>        </div>        <div class="logos">          <i class="fab fa-js fa-4x"></i>          <i class="fab fa-linkedin-in fa-4x"></i>          <i class="fab fa-dribbble fa-4x"></i>          <i class="fab fa-medium-m fa-4x"></i>          <i class="fab fa-github fa-4x"></i>        </div>      </div>    </div>  </div></div>

CSS:

body,html {
  height: 100%;
  background-color: white;
}
.container {
  overflow: hidden;
  .slider {
    animation: slidein 30s linear infinite;
    white-space: nowrap;
    .logos {
      width: 100%;
      display: inline-block;
      margin: 0px 0;
      .fab {
        width: calc(100% /5);
        animation: fade-in 0.5s
          cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
      }
    }
  }
}
@keyframes slidein {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

다음과 같이 크기가 다른 슬라이더의 이미지를 사용합니다.

<div class="container h-100">  <div class="row align-items-center h-100">    <div class="container rounded">      <h1 class="text-center">Featured in:</h1>      <div class="slider">        <div class="logos">          <img src="1.png">          <img src="2.png">          <img src="3.png">          <img src="4.png">          ...
        </div>      </div>    </div>  </div></div>

문제는 모든 로고가 미끄러질 때 슬라이더가 첫 번째 로고로 점프한다는 것입니다. 좋지 않아 보입니다. 마지막 로고 다음에 첫 번째 로고가 나타나지만 "점프"가 없는 반복 효과를 원합니다. 나는 매우 가볍고 깨끗하기 때문에 슬라이더를 좋아합니다.

내 문제를 해결하려면 어떻게 해야 합니까? 감사합니다!

귀하의 질문에 대한 수정 사항을 기록해 두십시오. 스니펫 데모를 사용했고 Codepen 데모에서 컴파일된 CSS를 포함했습니다. 이렇게 하면 자원 봉사자 도우미가 훨씬 쉽게 도움을 받을 수 있습니다.

isherwood2022-01-28 14:23:05
  • 이전 angular : SVG 파일을 각도로 렌더링하는 방법 태그와 를 사용하여 svg 파일을 렌더링하려고 하지만 표시되지 않습니다.
  • 다음 flutter : moshi-1.13.0.jar 변환 실패(biometric_storage:kaptGenerateStubsDebugKotlin 작업 실패)