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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

< div class = "buttons-wrapper" >

< input id = "slide1" type = "radio" name = "slider" checked>

< input id = "slide2" type = "radio" name = "slider" >

< input id = "slide3" type = "radio" name = "slider" >

< input id = "slide4" type = "radio" name = "slider" >

< ul class = "slider" >

< li >

< div class = "caption" >

< h3 >Maserati GranTurismo

< p >......

......

< label for = "slide1" >

< label for = "slide2" >

< label for = "slide3" >

< label for = "slide4" >

你要将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 ;

}