html5 css3触屏滑动双11手机动画页面特效



77 305 102



特效描述:html5 css3触屏滑动 双11 手机动画 页面特效,html5 css3在页面向上滑动的效果下每个页面使用了css3新属性transform完成简单的动画效果。双11手机动画页面特效。

代码结构

1. 引入CSS

<link href="css/cartoon.css" rel="stylesheet" >

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/idangerous.swiper.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

3. HTML代码

<div class="swiper-container">
    	<div class="swiper-wrapper">
    		<div class="swiper-slide">
               <div class="slider page_one" >
                  <img src="img/1-topic.png" class="one_topic one_cartoon" id="one_cartoon">
                  <img src="img/1-bottom.png" class="one_bt">
               </div>
            </div>
            <div class="swiper-slide">
               <div class="slider page_two">
                  <img src="img/2_gift.gif" class="two_topic " id="two_cartoon"> 
               </div>
            </div>
            <div class="swiper-slide">
               <div class="slider page_three ">
                  <img src="img/3_topic.png" class=" " id="three_cartoon" >
                  <img src="img/3_bg.jpg"  id="three">
               </div>
            </div>
            <div class="swiper-slide">
               <div class="slider page_four ">
                  <img src="img/4-topic.png" id="four_cartoon" class="four_init">
               </div>
            </div>
            <div class="swiper-slide">
               <div class="slider page_five ">
                  <div class="five_box five_init" id="five_cartoon">
                    <p>谢谢观赏!</p>
                  </div>
               </div>
            </div>
         </div>
</div><!--wrapper-->



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


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动星星打分 其他 图片滑动 图片滑块 震动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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