이 콘텐츠에서는 스와이프 페이지에 페이지 넘기기 애니메이션 - 3D 오버레이 흐름 효과를 소개합니다.
먼저 스와이퍼 페이지를 구축하고 CSS 스타일을 설정하여 효과를 확인하기 위해 이 장에서는 슬라이드에 배경 이미지를 추가합니다.
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="logo.png"></div> <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div> <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div> <div class="swiper-slide"><img src="logo.png"></div> </div> <div class="swiper-pagination"></div> </div>
그런 다음 이전 3D 블록 효과와 동일한 방식으로 속성을 추가하고 애니메이션을 설정합니다.
rree애니메이션 설정에서 무엇을 설정하고 있나요?
아아아애니메이션 효과는 그룹 디스플레이와 함께 사용하는 것이 가장 좋습니다. 단독으로 사용하면 효과가 좋지 않습니다.
위는 스와이퍼(세븐틴)의 기본 사용법입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!