Home > Web Front-end > HTML Tutorial > 纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:34:03
Original
1997 people have browsed it

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

    }           

  • source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template