我正在努力创建一个类似于以下设计的全景3D滑动轮播图:
然而,我的当前实现并没有达到相同的效果,轮播图看起来是这样的:
我想在CSS中实现那个轮播图。
这是我迄今为止尝试过的CSS代码:
这是我的 CodeSandbox 链接:https://codesandbox.io/s/coverflow-swiper-5kywvv?file=/src/App.css
我尝试调整 CSS 来实现这种效果,但是在用户界面上无法达到相同的效果。
我希望我的轮播图能够像这样:
有人可以帮我调整 CSS 以实现所需的效果吗?
![所需输出图像](https://istack.dev59.com/c66Dr.webp)
这是我迄今为止尝试过的CSS代码:
.coverflow-container {
perspective: 1000px;
width: 100%;
height: 250px;
position: relative;
overflow: hidden;
}
.coverflow-item {
position: absolute;
width: 200px; /* Width of each slide */
height: 250px; /* Height of non-active slides */
left: 50%;
transform-origin: center;
transition: transform 0.5s ease, z-index 0s linear, height 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
background: #b5b4b6;
color: white;
border: 1px solid black;
box-sizing: border-box;
opacity: 0.7;
}
.coverflow-item.active {
background: #272a36;
z-index: 3;
opacity: 1;
height: 90%; /* Larger height for the active slide */
}
.coverflow-controls {
position: absolute;
width: 100%;
bottom: 10px;
text-align: center;
padding-top: 100px;
}
button {
padding: 10px;
margin: 0 10px;
font-size: 16px;
cursor: pointer;
}
这是我的 CodeSandbox 链接:https://codesandbox.io/s/coverflow-swiper-5kywvv?file=/src/App.css
我尝试调整 CSS 来实现这种效果,但是在用户界面上无法达到相同的效果。
我希望我的轮播图能够像这样:
![enter image description here](https://istack.dev59.com/zTMsN.webp)
有人可以帮我调整 CSS 以实现所需的效果吗?