首页 > web前端 > html教程 > 纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 11:34:03
原创
2009 人浏览过

这是一款效果非常酷的纯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 ;

    }           

  • 来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板