c语言图片百叶窗特效,纯CSS3炫酷全屏百叶窗效果幻灯片特效

这是一款使用纯CSS3制作的效果非常炫酷的全屏百叶窗效果幻灯片特效。该幻灯片特效使用全屏背景图片制作，在幻灯片切换的时候图片会以百叶窗的方式隐藏和展现，效果非常不错。

制作方法

HTML结构

该幻灯片特效的HTML结构采用嵌套

的HTML结构，前后导航按钮使用和来制作。

First slide

......

百叶窗效果是通过在每个幻灯片中添加空的

，每个空

控制背景图片的一部分，然后使用CSS来制作动画效果。

CSS样式

整个幻灯片采用绝对定位，宽度和高度都为100%。

.slider--el {

z-index: 1;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

-webkit-transition: -webkit-transform 2.8s, z-index 0.1s;

transition: transform 2.8s, z-index 0.1s;

overflow: hidden;

}

第一幅幻灯片中共分为4个图块，每个图块宽度和高度都设置为50.2%。并通过will-change属性来优化动画性能。

.slider--el.anim-4parts .part {

position: absolute;

width: 50.2%;

height: 50.2%;

overflow: hidden;

will-change: transform;

}

接下来使用:before伪元素来为每一个图块添加背景图片，通过top和left来定位背景图片。使4个图块分别显示整幅图片的不同部分。

.slider--el.anim-4parts .part:before {

content: "";

display: block;

position: absolute;

background-size: cover;

width: 200%;

height: 200%;

background-image: url("aT2vggq.jpg");

}

.slider--el.anim-4parts .part.top {

top: 0;

-webkit-transition: -webkit-transform 1.3s 0.3s;

transition: transform 1.3s 0.3s;

}

.slider--el.anim-4parts .part.top:before {

top: 0;

}

......

然后在点击导航按钮之后通过translateX属性分别将它们移出屏幕之外。

.slider--el.anim-4parts .left {

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

.slider--el.anim-4parts .right {

-webkit-transform: translateX(100%);

-ms-transform: translateX(100%);

transform: translateX(100%);

}

其它代码请参考下载文件。