H5相关小动画代码（个人笔记）

以下代码均在HBuilder软件下执行：




一、图片的淡入      

1、首先需要在html页面建一个<div></div>的盒子（建议在body标签里建），并放上需要用到这个效果的图片

    如：<div class="page page1">

     <img src="img/indexBuilding.png" class="page1_build"/>

        </div>

2、新建一个css文件，将图片的样式设置好（习惯：先定位--->再设宽高--->再设置初始位置）

    如：.page1_build{
              position: absolute;
              width: 100%;
              height: 18%;
              bottom: 0;//bottom,left一起定义确定初始位置
              left: 0;
              display: none;//要实现淡入，就必须先将其隐藏（很重要）

                     }

3、新建一个脚本文件

    如：

      $(document).ready(function(){

           $(".page1_build").fadeIn(2000);//fadeIn的意思是淡入，2000是时间，单位是ms（毫秒）；能使                                                 用fadeIn必须要在css里的相应位置有display:
none;

        })

二、使图片无限循环的进行“放大--->回到原来大小”

1、首先在html页面建一个div盒子，放上图片

    如：<div class="page page1">

<img src="img/indexFlight.png" class="flight"/>

           </div>

2、新建一个css文件

    如：

        .flight{
        position: absolute;
        width:50% ;
        height:50% ;
        left:-100% ;

                top:0% ;

                z-index: 2;//z-index是调整图层的，当多张图片在一个画面上又想使图片的叠放位置正确时可以                              使用，默认值为0

                animation: flight 3s infinite;//animation是动画，格式是animation:图片名称 时间                                                       infimite是无限循环的意思

              }

3、新建一个脚本文件

    如： $(document).ready(function(){

                $(".page1_build").fadeIn(2000,function(){
      $(".flight").animate({left:'25%',top:'30%'},1000)

           //回调，意思是当build这个淡入执行完了后（时间为2000ms），才开始执行.flight这个图片的放大                 效果，left，top是执行放大效果的位置，1000是时间；如果想要两种效果（放大+淡入）同时执行，              那么只需要这样写：$(".page1_build").fadeIn(2000);

                               $(".flight").animate(2000);

})

})