(현재 위치)
.
의 새로운 값이 필요합니다. <div><is> s는 r이 0.707 * s와 같기 때문에 r은 이미지 크기의 70.7%와 같다고 말할 수 있습니다. 다음은 120.7%의 값을 얻는 방법을 설명하는 그래프입니다. (이미지는 여기에 포함되어야하지만 이미지를 처리 할 수 없으므로 텍스트로 설명하겠습니다) 이미지는 변환-원래 값을 계산하는 기하학적 관계를 보여줍니다. <p>
<the> 애니메이션을 실행하고 어떻게되는지 보자. (애니메이션 효과는 여기에 내장되어야하지만 애니메이션을 처리 할 수 없으므로 텍스트로 설명하겠습니다) 애니메이션 효과는 모든 이미지가 함께 겹쳐져 있기 때문에 하나의 이미지 만 볼 수 있음을 보여줍니다. </the></p>
<delay> 우리는이 겹치는 것을 피하기 위해 각 이미지의 애니메이션을 지연시켜야합니다. <p>
</p>
<impr> 상황이 개선되었습니다! <p>
<over> 컨테이너의 오버플로를 숨기면 이미 슬라이더를 볼 수 있지만 이동하기 전에 각 이미지가 짧은 시간 동안 보이도록 애니메이션을 약간 업데이트합니다. </over></p>
<our> 우리는 다음을 위해 애니메이션 키 프레임을 업데이트 할 것입니다 : <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
<img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div></pre><div class="contentsignin">로그인 후 복사</div></div>.
<p>
각 90deg (360deg/4, 여기서 4는 이미지 수)에 대해 작은 일시 정지를 추가합니다. 각 이미지는 다음 이미지로 미끄러지기 전에 가시 기간 (27%-22%, 52%-47%등)의 총 지속 시간의 5%로 유지됩니다. 애니메이션을 더 아름답게 만들기 위해 기능으로 </p>를 업데이트 할 것입니다.
<ider> 이제 우리 슬라이더가 완벽합니다! 글쎄요, 우리는 여전히 마지막 터치 업을 놓치고 있기 때문에 거의 완벽합니다. 이미지 주위에서 회전하는 다채로운 둥근 경계. 우리는 <p> 래퍼에서 pseudo-elements를 사용하여 그것을 만들 수 있습니다 : </p>
<p>
<circle> 나는 반복적 인 원뿔형 구배를 가진 원을 배경으로 만들었고, 채우기 영역 만 표시하는 마스킹 트릭을 사용했습니다. 그런 다음 이미지에 정의 된 동일한 애니메이션을 적용합니다. (애니메이션 효과는 여기에 포함되어야하지만 애니메이션을 처리 할 수 없으므로 생략 할 것입니다) </circle></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.gallery {
--s: 280px; /* 控制大小 */
display: grid;
width: var(--s);
aspect-ratio: 1;
padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 우리는 끝났다! 멋진 루프 슬라이더가 있습니다 : <p>
<more> 더 많은 이미지를 추가합시다 <code>cubic-bezier()
animation-timing-function
이렇게하려면 Sass를 소개하여 코드를보다 일반화 할 것입니다. 먼저 이미지 수 ($ N)의 변수를 정의하고 하드 코드 된 이미지 수의 각 부분 (4)을 업데이트합니다.
.gallery
.gallery > img {
/* 与之前相同 */
animation: m 8s infinite linear;
transform-origin: 50% 120.7%;
}
@keyframes m {
100% { transform: rotate(-360deg); }
}
.gallery {
--s: 280px; /* 控制大小 */
display: grid;
width: var(--s);
aspect-ratio: 1;
padding: calc(var(--s) / 20); /* 我们稍后将看到它的用途 */
border-radius: 50%;
}
.gallery > img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
transform-origin를 찾는 방법은 다음과 같습니다.
우리는 끝났다! 우리는 여러 이미지에 대한 슬라이더가 있습니다!
.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */
transform-origin 요약
CSS 변환 및 표준 형상을 사용하는 몇 가지 트릭을 사용하여 많은 코드없이 멋진 루프 슬라이더를 만들었습니다. 이 슬라이더의 멋진 점은 우리가 원이 있기 때문에 무한 애니메이션을 유지하기 위해 이미지를 복사하는 것을 귀찮게 할 필요가 없다는 것입니다. 전체 회전 후 첫 번째 이미지로 돌아갑니다!
위 내용은 CSS 무한 및 원형 회전 이미지 슬라이더의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
