Html5+Css3 Banner Animation 多方位移动特效

背景:朋友问我小米官网的mi4的特效会做吗,可能新接的一个小网站需要用到。一直有打算研究H5C3的一些效果,趁此机会,赶紧学习一下!

效果:如图 素材

HTML:

<div class="banner">
        <div class="fea one ">
            <div class="fea1 left-to-right"></div>
        </div>
        <div class="fea two hide">
            <div class="fea2 top-to-bottom"></div>
        </div>
        <div class="fea three hide">
            <div class="fea3 bottom-to-top"></div>
        </div>
        <div class="fea four hide">
            <div class="fea4 right-to-left"></div>
        </div>
        
        <div class="btnwrap"><b class="cur"></b><b></b><b></b><b></b></div>
    </div>

STYLE:

<style type="text/css">  
    @keyframes fea1{  0% { left:-600px; } 100% { left:0; } }   
    @-webkit-keyframes fea1{  0% { left:-600px; } 100% { left:0; } }   
    @-moz-keyframes fea1{  0% { left:-600px; } 100% { left:0; } }   
    @-o-keyframes fea1{  0% { left:-600px; } 100% { left:0; } }    
     .left-to-right{
        animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
        -webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
        -moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
        -o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea1;
    }    
    
    
    @keyframes fea2{  0% { top:-600px; } 100% { top:-40px; } }   
    @-webkit-keyframes fea2{  0% { top:-600px; } 100% { top:-40px; } }   
    @-moz-keyframes fea2{  0% { top:-600px; } 100% { top:-40px; } }   
    @-o-keyframes fea2{  0% { top:-600px; } 100% { top:-40px; } }    
     .top-to-bottom{
        animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
        -webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
        -moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
        -o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea2;
    }    
    
    
    @keyframes fea3{  0% { bottom:-200px; } 100% { bottom:70px; } }   
    @-webkit-keyframes fea3{  0% { bottom:-200px; } 100% { bottom:70px; } }   
    @-moz-keyframes fea3{  0% { bottom:-200px; } 100% { bottom:70px; } }   
    @-o-keyframes fea3{  0% { bottom:-200px; } 100% { bottom:70px; } }    
     .bottom-to-top{
        animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
        -webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
        -moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
        -o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea3;
    }    
    
    
    @keyframes fea4{  0% { left:1400px; } 100% { left:100px; } }   
    @-webkit-keyframes fea4{  0% { left:1400px; } 100% { left:100px; } }   
    @-moz-keyframes fea4{  0% { left:1400px; } 100% { left:100px; } }   
    @-o-keyframes fea4{  0% { left:1400px; } 100% { left:100px; } }    
     .right-to-left{
        animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
        -webkit-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
        -moz-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
        -o-animation: 1.5s cubic-bezier(0.86, 0, 0.07, 1) 0s normal none 1 running fea4;
    }    
    
    
    *{ margin:0; padding:0; }
    .banner{ width:800px; margin:0 auto; overflow:hidden; }
    .fea { width:800px; height:320px; position:relative; }
    .fea.hide { display:none; }
    .one{ background:#099999; }
     .fea1{ width:600px; height:231px; background:url(images/fea-1.png) center center; z-index:1; position:absolute; bottom:0;  }
    .two{ background:#ff8400; }
     .fea2{ width:600px; height:339px; background:url(images/fea-2.png) center center; z-index:1; position:absolute; top:-40px; left:100px;  }
    .three{ background:#f10000; }
     .fea3{ width:300px; height:172px; background:url(images/fea-3.png) center center; z-index:1; position:absolute; left:250px; bottom:70px;  }
    .four{ background:#f9f9f9; }
     .fea4{ width:600px; height:249px; background:url(images/fea-4.png) center center; z-index:1; position:absolute; left:100px;  top:40px; }
    
    .btnwrap{ z-index:40; position:absolute; top:280px; margin-left:320px; }
    .btnwrap b{ display:inline-block; background:#cccccc; width:30px; height:14px; cursor:pointer; margin:10px;  }
    .btnwrap b.cur{ background:#62CFEE; }
</style>

JAVASCRIPT:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){    
    var bannerwrap = function(o){
        $(".btnwrap b").removeClass("cur");
        $(".btnwrap b:eq("+o+")").addClass("cur");                
        $(".banner .fea").hide();        
        $(".banner .fea:eq("+o+")").fadeIn(800);
    }
    
    var i=0;
    $(".btnwrap b").click(function(){
        i=$(this).index();
        bannerwrap(i);
    });
    
    var sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
    $(".banner").hover(function(){
        clearInterval(sid);
    },function(){
        sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
    });
});
</script>

总结:Html5、Css3在近几年使用已经非常广泛了,特别在移动端,应用场景层出不穷,抓紧学习一下,不要凹凸曼啦!

时间: 02-09

Html5+Css3 Banner Animation 多方位移动特效的相关文章

基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: <style type="text/css"> #liu{ width:280px; height: 279px; background: url(shishi.png) no-repeat; border-radius:140px; -webkit-animation:run 6s

10款基于HTML5+CSS3实现的超酷源码动画

1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图片,同时还有HTML5表单字段的简单验证,CSS3的使用,让整个登录表单的投影显得更加立体. 在线演示 源码下载 2.很酷的CSS3多窗口邮件阅读器 这是一款非常炫酷华丽的CSS3邮件阅读器界面,它的特点是你可以同时点开多个邮件,而不必跳转页面.当你阅读完后可以点击关闭按钮关闭当前邮件的窗口.对于这

9款超绚丽的HTML5/CSS3应用和动画特效

1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示 源码下载 2.HTML5/CSS3 3D纸片折叠动画 今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知

HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结

<h1>HTML5+CSS3 animation/keyframe/transform/transition/2D translate/3D translate 学习总结</h1> <h1>HTML5,animation,keyframe,transform,transition,2D translate,3D translate,CSS3</h1> CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CS

精选10款超酷的HTML5/CSS3菜单

今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单.今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果.每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷. 在线演示 / 源码下载 2.CSS3动画下拉菜单 带动画图标 利用CSS3可以制作很多精

7款效果惊人的HTML5/CSS3应用

今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示该菜单项具体的内容.该CSS3菜单在展开时也有不错的动画效果. 2.HTML5视频破碎重组特效 强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特

CSS3实现水位充满文字特效

CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位上升的真实效果,水面还会波浪浮动,当Loading动画结束时,文字中的水位又会渐渐退去,动画效果和上升类似,这样周而复始,从而达到很酷HTML5 Loading动画效果.JQuery特效 源代码:http://www.huiyi8.com/sc/8898.html CSS3实现水位充满文字特效,布布扣,bubuko.com

9款极具创意的HTML5/CSS3进度条动画(免积分下载)

尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detail/yangwei19680827/7352505 今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加

HTML5+CSS3静态页面项目-PayPaul的总结

学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及理论知识的辅助来提高代码水平.首先是做几个HTML5+CSS3静态页面布局的练习,查缺补漏知识点并且总结在实践过程中遇到的一些错误.页面的设计稿主要是网络上找来了的,也尝试自己切图.测量位置.获得内容的属性等等,假装自己真的在完成一个项目. 第一个页面是从设计达人这个平台上找来的,这个平台的页面设计

10款基于html5+css3实现的动画的源码

1.CSS3简易清新的下拉菜单 对于CSS3菜单我们已经在以前分享过很多了,有华丽的动画菜单,也有冲击视觉的3D菜单,今天要介绍的是一款简易而实用的下拉菜单,绿色的主题风格,让菜单的外观看上去非常清新,下拉菜单的颜色和主菜单的颜色搭配也非常不错. 在线演示 源码下载 2.HTML5自定义背景图片的文字特效 在HTML5和CSS3标准出来之前,文字的背景只能是纯色,更不用说是自定义背景图片了.然而,强大的HTML5不仅让文字背景支持渐变颜色,而且支持自定义的背景图片,这些图片就像遮罩层,让文字的背