基于HTML5实现3D立方体动画特效



76 301 101



特效描述:基于HTML5实现 3D立方体动画,基于HTML5实现3D立方体动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

2. 引入JS

<script src='js/jquery.js'></script>
<script src="js/index.js"></script>

3. HTML代码

  <div id="wrapper" class="clearfix">
    <div class="slider-outer">
      <div class="slider-inner">
        <div data-slide="1" class="slide front active">
          <div class="slide-title">Slide 1<i class="fa fa-html5"></i></div>
        </div>
        <div data-slide="2" class="slide top">
          <div class="slide-title">Slide 2<i class="fa fa-css3"></i></div>
        </div>
        <div data-slide="3" class="slide back">
          <div class="slide-title">Slide 3<i class="fa fa-android"></i></div>
        </div>
        <div data-slide="4" class="slide bottom">
          <div class="slide-title">Slide 4<i class="fa fa-mobile-phone"></i></div>
        </div>
      </div>
    </div>
    <nav id="nav" class="clearfix">
      <ul class="clearfix">
        <li><a href="href" data-slide="1" class="btn focus">1</a></li>
        <li><a href="href" data-slide="2" class="btn">2</a></li>
        <li><a href="href" data-slide="3" class="btn">3</a></li>
        <li><a href="href" data-slide="4" class="btn">4</a></li>
      </ul>
    </nav>
  </div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 加载动画 选项卡切换 滑动手风琴 html5弹窗动画 旋转翻转 html5动画 html5按钮动画 图片翻转旋转 html5图片动画 图片切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到