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鼠标滑过图片特效插件

在线演示 本地下载 原文地址:https://www.cnblogs.com/qixidi/p/10079690.html

基于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邮件阅读器界面,它的特点是你可以同时点开多个邮件,而不必跳转页面.当你阅读完后可以点击关闭按钮关闭当前邮件的窗口.对于这

html5和css3实现的3D滚动特效

今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="cube"> <div class="side side1"> </div> <div class="side side2"> </div> <div c

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

HTML5+CSS3特效设计集锦

20款CSS3鼠标经过文字背景动画特效 站长之家 -- HTML5特效索引  30个酷毙的交互式网站(HTML5+CSS3)

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

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

精心挑选的HTML5/CSS3应用及源码

这段时间我已经为大家分享了不少关于HTML5应用和jQuery插件了,先来回顾一下: 炫酷霸气的HTML5/jQuery应用及源码 干货分享 超炫丽的HTML5/jQuery应用及代码 绚丽而实用的jQuery/CSS3应用及源码 今天我们继续来介绍一些新鲜的HTML5/CSS3应用及源码,希望大家会喜欢.HTML5是WEB的未来,我们需要不断学习. HTML5 3D骨牌图片特效 很不错的HTML5 3D图片动画特效,图片也不再是平面的了. 核心CSS代码: figure { margin: 0