css百叶窗幻灯片 |css双边框

.slideshow {
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform 1s ease-in-out;
transform-origin: 0 0;
}
.slide:nth-child(1) {
background-image: url('img1.jpg');
transform: rotateX(0deg);
}
.slide:nth-child(2) {
background-image: url('img2.jpg');
transform: rotateX(90deg);
}
.slide:nth-child(3) {
background-image: url('img3.jpg');
transform: rotateX(180deg);
}
.slide:nth-child(4) {
background-image: url('img4.jpg');
transform: rotateX(270deg);
}
.slideshow:hover .slide {
transform: rotateX(-90deg);
}

首先，大家创建一个外层容器，类名为slideshow，用来存放所有的滑块图片。将容器的宽高设为500px和300px，并设置居中样式。

接着，大家为每个滑块图片创建一个类名为slide的容器，并设置绝对定位。使用transform属性将每个滑块旋转90度，使之呈现出一层一层叠放的效果。

然后，大家为每个滑块设置对应的背景图片，通过nth-child选择器进行区分。同时，大家还需要设置transform-origin属性，将旋转中心点设为滑块图片的左上角。

最后，大家为slideshow容器设置hover事件，将所有的滑块图片倒转，并通过过渡效果使之呈现出百叶窗的效果。

通过以上CSS代码，大家便实现了简单的CSS百叶窗幻灯片效果。