html5 css3觸屏滑動雙11手機動畫頁面特效



81 322 108



特效描述: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

加群請備注:從官網了解到

老夫子电子