社區(qū)精選 | 借助 :has 實(shí)現(xiàn)3d輪播圖
今天小編為大家?guī)?lái)的是社區(qū)作者 XboxYan 的文章，讓我們一起來(lái)學(xué)習(xí)借助 :has 實(shí)現(xiàn)3d輪播圖。
3d 視覺(jué)，也就是中間大，兩邊小 自動(dòng)輪播，鼠標(biāo)放上自動(dòng)暫停 點(diǎn)擊任意卡片會(huì)立即跳轉(zhuǎn)到該卡片
一、3d 視覺(jué)樣式
<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;
}
/*當(dāng)前項(xiàng)*/
.item.current {
transform: translate3d(0, 0, 0);
}
/*當(dāng)前項(xiàng)右1*/
.item.current + .item,
.item:first-child:has(~ .item.current:last-child) {
transform: translate3d(30%, 0, -100px);
}
/*當(dāng)前項(xiàng)左1*/
.item:has(+ .item.current),
.item.current:first-child ~ .item:last-child {
transform: translate3d(-30%, 0, -100px);
}
/*當(dāng)前項(xiàng)右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);
}
/*當(dāng)前項(xiàng)左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);
}
二、自動(dòng)輪播和暫停
.view {
/**/
animation: scroll 3s infinite;
}
@keyframes scroll {
to {
transform: translateZ(.1px); /*無(wú)關(guān)緊要的動(dòng)畫(huà)樣式*/
}
}
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;
}
三、點(diǎn)擊快速切換
<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");
});
四、總結(jié)一下
3d 視覺(jué)樣式可以通過(guò)transform-style: preserve-3d;實(shí)現(xiàn)近大遠(yuǎn)小的效果 通過(guò).item:has(+.item.current)可以設(shè)置當(dāng)前項(xiàng)前面的兄弟節(jié)點(diǎn) 還需要考慮第一個(gè)和最后一個(gè)這兩種臨界情況 輪播圖自動(dòng)輪播和暫停可以借助animationiteration回調(diào)，這種方式的優(yōu)勢(shì)是可以通過(guò):hover控制 :has偽類(lèi)貌似不支持多層嵌套，希望以后可以支持吧~
評(píng)論
圖片
表情