社區(qū)精選 | 借助 :has 實現(xiàn)3d輪播圖
今天小編為大家?guī)淼氖巧鐓^(qū)作者 XboxYan 的文章，讓我們一起來學習借助 :has 實現(xiàn)3d輪播圖。
3d 視覺，也就是中間大，兩邊小 自動輪播，鼠標放上自動暫停 點擊任意卡片會立即跳轉到該卡片
一、3d 視覺樣式
<div class="view" id="view">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item current">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
.view {
position: relative;
width: 400px;
height: 250px;
transform-style: preserve-3d;
perspective: 500px;
}
.item {
position: absolute;
width: 100%;
height: 100%;
border-radius: 8px;
display: grid;
place-content: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
transform: translate3d(0, 0, -100px);
}
.item.current {
transform: translate3d(0, 0, 0);
}
.item.current + .item{
transform: translate3d(30%, 0, -100px);
}
.item:has(+.item.current){
transform: translate3d(-30%, 0, -100px);
}
.item.current:first-child ~ .item:last-child {
transform: translate3d(-30%, 0, -100px);
opacity: 1;
}
.item:first-child:has(~ .item.current:last-child) {
transform: translate3d(30%, 0, -100px);
opacity: 1;
}
/*當前項*/
.item.current {
transform: translate3d(0, 0, 0);
}
/*當前項右1*/
.item.current + .item,
.item:first-child:has(~ .item.current:last-child) {
transform: translate3d(30%, 0, -100px);
}
/*當前項左1*/
.item:has(+ .item.current),
.item.current:first-child ~ .item:last-child {
transform: translate3d(-30%, 0, -100px);
}
/*當前項右2*/
.item.current + .item + .item,
.item:first-child:has(~ .item.current:nth-last-child(2)),
.item:nth-child(2):has(~ .item.current:last-child) {
transform: translate3d(50%, 0, -150px);
}
/*當前項左2*/
.item:has(+.item + .item.current),
.item.current:first-child ~ .item:nth-last-child(2),
.item.current:nth-child(2) ~ .item:last-child{
transform: translate3d(-50%, 0, -150px);
}
二、自動輪播和暫停
.view {
/**/
animation: scroll 3s infinite;
}
@keyframes scroll {
to {
transform: translateZ(.1px); /*無關緊要的動畫樣式*/
}
}
view.addEventListener("animationiteration", () => {
const current = view.querySelector(".current") || view.firstElementChild;
current.classList.remove("current");
if (current.nextElementSibling) {
current.nextElementSibling.classList.add("current");
} else {
view.firstElementChild.classList.add("current");
}
});
.view:hover{
animation-play-state: paused;
}
三、點擊快速切換
<div class="view" id="view">
<label class="item"><input type="radio" checked name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
<label class="item"><input type="radio" name="item"></label>
</div>
.item:has(+.item:has(:checked)){
/*不生效*/
}
view.addEventListener("click", (ev) => {
const current = view.querySelector(".current") || view.firstElementChild;
current.classList.remove("current");
ev.target.closest('.item').classList.add("current");
});
四、總結一下
3d 視覺樣式可以通過transform-style: preserve-3d;實現(xiàn)近大遠小的效果 通過.item:has(+.item.current)可以設置當前項前面的兄弟節(jié)點 還需要考慮第一個和最后一個這兩種臨界情況 輪播圖自動輪播和暫?？梢越柚?/span>animationiteration回調(diào)，這種方式的優(yōu)勢是可以通過:hover控制 :has偽類貌似不支持多層嵌套，希望以后可以支持吧~
評論
圖片
表情