H5頁面制作和CSS3動畫的結合

現在很火的是h5頁面的開發，更多的視覺沖擊，帶來更多的關注度，更多的眼球，想要別人看你的東西，不在是以前的一段文字，或是一個圖片的時代了，現在h5把一張張圖片，一段段文字動起來，更有與客戶的交互，而且強大的段子手寫出的段子，讓這個信息流的時代更加高速，更加具有沖擊感。
我剛接觸h5設計，其實在設計與編程中，你會考慮UI的設計稿，那一個元素，你可以摘出來做一個動畫，那一部分需要用戶進行互動。

CSS3動畫：
1.隨風搖曳的竹子、晃動的小人、旋轉的音樂圖標：

.logo{position: fixed;left: 10px;bottom: 20px;-webkit-animation: sway2 2s ease-in-out alternate infinite;animation: sway2 2s ease-in-out alternate infinite;z-index: 20;}
.play { -webkit-animation: music 4s linear infinite;animation: music 4s linear infinite;}
.bamboo1 {
    -webkit-animation: sway 4s ease-in-out alternate infinite;
    animation: sway 4s ease-in-out alternate infinite;
}
.bamboo2 {
    -webkit-animation: sway2 4s ease-in-out alternate infinite;
    animation: sway2 4s ease-in-out alternate infinite;
}
/** animation css **/
@-webkit-keyframes music {
   0% {
       -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      
    }
    100% {
       -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      
    }
}
 @-webkit-keyframes sway {
   0% {
       -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      transform-origin: center left;
      
    }

    100% {
       -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        transform-origin: center left;
      
    }
}
 @-webkit-keyframes sway2 {
   0% {
       -webkit-transform: rotate(-10deg);
      transform: rotate(-10deg);
      transform-origin: center right;
      
    }

    100% {
       -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
        transform-origin: center right;
      
    }
}

h5頁面中很重要的一個部分就是音樂，音樂的按鈕可以循環播放，點擊暫停哦，再次點擊打開。
此處使用了h5的audio標簽，已經js控制音樂的播放與暫停，代碼如下：

<style> div#loading {width: 100%;height: 100%;position: fixed;background:#fff;z-index: 100000;}
div#loading img{width: auto;position: fixed;left: 50%; top: 50%;}</style>

<div id="loading"><img src="images/loading.gif"></div>
 <audio autoplay="true">
    <source src="video.mp3" type="audio/mpeg">
</audio> 
<div  id="M-btn" class="play"></div> 
$(window).load(function() {
    $("#loading").hide();
        var music = document.getElementById('M-btn');
        var audio = document.getElementsByTagName('audio')[0];
        audio.addEventListener("ended", function(event){
            music.setAttribute("class", "");
        },false);
        music.addEventListener("touchstart", function(event){
            if (audio.paused) {
                audio.play();
                this.setAttribute("class", "play");
            }else{
                audio.pause();
                this.setAttribute("class", "");
            };
        },false);
})

$("#loading").hide();是我們的網速慢，服務器慢等問題，需要等2s左右才能完整體驗h5頁面。

2.盪漾的波浪，搖擺的小船和船夫：

 

.wave2 {
    -webkit-animation: wave 2s ease-in-out alternate infinite;
    animation: wave 2s ease-in-out alternate infinite;
}
.boat {
    -webkit-animation: boat-wave 2s ease-in-out alternate infinite;
    animation: boat-wave 2s ease-in-out alternate infinite;
}
.man {
    -webkit-animation: boat-wave 2s ease-in-out alternate infinite;
    animation: boat-wave 2s ease-in-out alternate infinite;
}
/** animation css **/
 @-webkit-keyframes boat-wave {
   0% {
       -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
     /* transform-origin: center left;*/
      
    }

    100% {
       -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
       /* transform-origin: center left;*/
      
    }
}
 @-webkit-keyframes wave {
   0% {
       -webkit-transform: translatex(-10px);
      transform: translatex(-10px);
      
      
    }

    100% {
       -webkit-transform: translatex(10px);
        transform: translatex(10px);
        
      
    }
}

 

3.發光的粽子，閃爍的指示，點擊粽子出現的驚喜。

    .zongzi img:nth-child(2){width:75px;top: -20px;left: -30px;position: absolute;animation: light .5s infinite alternate;-webkit-animation: light .5s infinite alternate;}
@keyframes light{
    0%{
        opacity: .5;
        -webkit-transform: scale(.8,.8);
        transform: scale(.8,.8);
    }
    100%{
        opacity: 1;
    }
}
<script>
        surprise.addEventListener("touchstart", function(){
        var child = document.getElementById('child');
        $("body,html").animate({
            'scrollTop':"+=1000px"},1000);
        setTimeout(function() {
            child.setAttribute("class", "child fadeIn");
        },2000);
        },false);

        window.addEventListener('scroll' , function(){
        var top =$("body,html").scrollTop();
          if(top > 50){

            open.style.display="none";
        }
</script>