码迷,mamicode.com
首页 > Web开发 > 详细

H5页面制作和CSS3动画的结合

时间:2018-07-05 19:50:15      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:代码   scroll   现在   child   otto   用户   rip   技术分享   round   

现在很火的是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>

 

 

 



 

H5页面制作和CSS3动画的结合

标签:代码   scroll   现在   child   otto   用户   rip   技术分享   round   

原文地址:https://www.cnblogs.com/cheryshi/p/9269966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!