您好,欢迎访问一九零五行业门户网

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效_html/css_WEB-ITnose

这是一款效果非常酷的纯css3全屏3d立方体旋转展示幻灯片特效。该幻灯片使用全屏的3d立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷。
在线预览    源码下载
 使用方法  html结构 该幻灯片的立方体结构使用的是一个无序列表来制作,每一个
元素是一个立方体的面。幻灯片的上下导航按钮使用的是radio单选按钮和label来制作。整个3d立方体幻灯片被包裹在一个div容器中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
maserati granturismo h3 >
       ...... a >
       p >
     div >
   li >
   ......
   ul >
label >
   label >
   label >
   label >
div >        
 css样式 你要将demo中的图片更换自己的图片,可以找到skin.min.css中的以下代码,更换图片的地址即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body .buttons-wrapper .slider > li:nth-child( 1 ) {
   background : url ( 1 .jpg) no-repeat center center ;
}
body .buttons-wrapper .slider > li:nth-child( 2 ) {
   background : url ( 2 .jpg) no-repeat center center ;
}
body .buttons-wrapper .slider > li:nth-child( 3 ) {
   background : url ( 3 .jpg) no-repeat center center ;
}
body .buttons-wrapper .slider > li:nth-child( 4 ) {
   background : url ( 4 .jpg) no-repeat center center ;
}
其它类似信息

推荐信息