CSS 무한 슬라이더가 폴라로이드 이미지를 뒤집습니다
- William Shakespeare원래의
- 2025-03-09 12:28:15246검색
(지금!)
Infinite 3D 슬라이더
기본 설정- 컨테이너를 그리드로 설정하고 모든 이미지가 서로 위에 쌓여 있습니다.
-
트릭은 무엇입니까? 이 슬라이더의 논리는 이미지의 스태킹 순서에 따라 다릅니다. 예, 를 사용할 것입니다. 모든 이미지는 동일한 값 (2)으로 시작하여 스택의 마지막 이미지를 상단에 놓습니다. -
우리는 마지막 이미지를 가져 와서 스택의 다음 이미지가 표시 될 때까지 오른쪽으로 밀어 넣습니다. 그런 다음 이미지의 값은 나머지 이미지보다 낮기 때문에 스택의 마지막 이미지가됩니다.
우리는 다음 이미지를 밀어 넣습니다 (n -1). 다음 이미지는 보이며 (n -2)
우리는 다음 이미지 (n -2)를 밀어냅니다. 다음 이미지는 보이며 (n -3)
(첫 번째 이미지에 도달 할 때까지 동일한 프로세스를 계속합니다)
<code><div> <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""> </div></code>
를 고려해야합니다. 잊지 마십시오. 이미지가 스택에서 나오고 스택의 바닥으로 미끄러지기 전에 이미지의
를 변경하면 맨 위에 유지됩니다. 우리가해야 할 일은 두 번째 이미지의
다시 말해, 애니메이션이 끝나기 전에 두 번째 이미지의 2로 증가하고 빨간색 마이너스 부호가 : 1과 관련이 있습니다. 두 번째 이미지는
성공! 우리의 무한대 슬라이더는 이제 완벽합니다! 이것은 우리의 최종 코드에 관한 것입니다 : 업데이트를위한 다른 애니메이션을 만듭니다. 우리는 애니메이션에서
다음 번에는 3D 슬라이더를 만들 것입니다. 계속 지켜봐! <code><div>
<img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>
<code>.gallery {
display: grid;
width: 220px; /* 控制大小 */
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
}</code>
z-index
z-index
<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>
z-index 값을 2에서 1로 업데이트하면 맨 위에 남아 있습니다! 모든 이미지에 동일하게 <code><div>
<img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>
<code>.gallery {
display: grid;
width: 220px; /* 控制大小 */
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
}</code>
<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>
z-index를 업데이트하는 것입니다. 따라서 세 번째 이미지를 데크에서 멀리 밀기 전에 두 번째 이미지 를 2로 업데이트합니다. <code>@keyframes slide {
0% { transform: translateX(0%); }
16.67% { transform: translateX(120%); }
33.34% { transform: translateX(0%); }
100% { transform: translateX(0%); }
}</code>
Green Plus 부호는 z-index를 다시 2로 변경합니다. 이렇게하면 두 이미지 모두 z-index가 동일하게 유지되지만 DOM에 나중에 나타나기 때문에 세 번째 이미지는 여전히 상단에 있습니다. 그러나 세 번째 이미지가 슬라이드하고 업데이트 된 후 z-index는 바닥으로 이동합니다. z-index
z-index
z-index 마지막 z-index 이미지이기 때문에이 경우에만 발생합니다. 나머지 이미지는 N, N -1이기 때문에 양호합니다. 그리고 우리는 3에서 2로, 2에서 1에서 1로갑니다… 그러나 우리는 1에서 N으로갑니다. z-index
이를 피하기 위해 마지막 이미지에 다음 키 프레임을 사용합니다.
z-index
z-index 값을 재설정하고 첫 번째 이미지는 스택에서 벗어났습니다. 그래서 우리는 어떤 점프도 볼 수 없습니다! <code>@keyframes slide {
0% { transform: translateX(0%); z-index: 2; }
16.66% { transform: translateX(120%); z-index: 2; }
16.67% { transform: translateX(120%); z-index: 1; } /* 我们在这里更新 z-order */
33.34% { transform: translateX(0%); z-index: 1; }
100% { transform: translateX(0% ); z-index: 1; }
}</code>
<code><div>
<img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></code>
z-index
steps(1)
"오른쪽 스 와이프"및 "스 와이프"후에도 이미지의 나머지 이미지가 시퀀스를 완성 할 때까지 이미지가 움직이지 않아야합니다. 따라서 "직접"부분은 "스 와이프"및 "왼쪽 스 와이프"와 같은 (n -1)과 같은 시간이 걸립니다. 한 번 반복하면 N 이미지가 미끄러집니다. 따라서 오른쪽 스 와이프 및 스 와이프는 전체 애니메이션 타임 라인의 100%/N을 설명합니다. 오른쪽 스 와이프 및 스 와이프는 전체 애니메이션 타임 라인의 100%/N을 설명합니다. 이미지는 (100%/n)/2로 스택에서 미끄러 져 100%/n으로 미끄러집니다. z-index
<code>.gallery {
display: grid;
width: 220px; /* 控制大小 */
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border: 10px solid #f2f2f2;
box-shadow: 0 0 4px #0007;
}</code>를 재설정하는 곳이어야합니다. 한편, 다음 이미지가 미끄러지기 시작합니다. 슬라이딩 부품에는 100%/n이 필요하므로 재설정은 100%-10%/n : 에서 발생해야합니다.
<code>.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */</code>를 부여하는 것이 었습니다. 루프에서 요약
이 모든 작업은 균형 잡힌 행동입니다. 이 연습 전에 스태킹 순서가 어떻게 작동하는지 잘 모르겠다면 이제 더 잘 이해할 수 있습니다! 이해하기 어려운 설명을 찾으면이 기사를 다시 읽고 연필과 종이로 내용을 그리는 것이 좋습니다. 이 기술을 더 잘 이해하기 위해 애니메이션의 각 단계를 설명하기 위해 다른 수의 이미지를 사용해보십시오.
z-index
위 내용은 CSS 무한 슬라이더가 폴라로이드 이미지를 뒤집습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!