背景:朋友问我小米官网的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在近几年使用已经非常广泛了,特别在移动端,应用场景层出不穷,抓紧学习一下,不要凹凸曼啦!

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

  1. HTML5/CSS3(PrefixFree.js) 3D文字特效

    之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...

  2. html5/CSS3鼠标滑过图片特效插件

    在线演示 本地下载

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

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

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

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

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

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

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

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  7. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  8. 9款赏心悦目的HTML5/CSS3应用特效

    经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...

  9. 12种炫酷HTML5 SVG和CSS3表单浮动标签特效

    这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...

随机推荐

  1. 利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)

    转自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括, ...

  2. PHP+MySQL多语句执行<转自wooyun>

    发起这个帖子,估计就很多人看到题目就表示不屑了.一直以来PHP+MySQL环境下,无论是写程序或者是注入攻击,是无法多语句执行的,这么广为人知的常识,没理由会有人不知道.可权威就是用来被挑战的,常识也 ...

  3. oracle批量导出AWR报告

    工作需求:项目中需要把生产库中所有的AWR报告dump出来,然后导入到方便测试的数据库中.在测试库中的AWR报告需要根据dbid和实例名逐个导出,如果遇到很多再加上RAC系统,会很麻烦.在网上找了一些 ...

  4. C# 手动读写app config 的源码

    public class ConfigOperator { public string strFileName; public string configName; public string con ...

  5. DB9 公头母头引脚定义及连接

    1.实物及引脚简单介绍 在做开发的时候常常会用到串行接口,一般9针的串行接口居多.例如以下图所看到的: 公头母头用于连接线的採用上图封装.但用于开发板的时候採用90度弯角插针的封装.例如以下图: 各引 ...

  6. hdu 4099 Revenge of Fibonacci 字典树+大数

    将斐波那契的前100000个,每个的前40位都插入到字典树里(其他位数删掉),然后直接查询字典树就行. 此题坑点在于 1.字典树的深度不能太大,事实上,超过40在hdu就会MLE…… 2.若大数加法时 ...

  7. Spark wordcount 编译错误 -- reduceByKey is not a member of RDD

    Attempting to run http://spark.apache.org/docs/latest/quick-start.html#a-standalone-app-in-scala fro ...

  8. oracle 基本操作

    1. 开启oralce和监听#su - oracle$sqlplus / as sysdba>startup>exit$lsnrctl start$ps -ef|grep oracle 一 ...

  9. C#综合揭秘——Entity Framework 并发处理详解

    引言 在软件开发过程中,并发控制是确保及时纠正由并发操作导致的错误的一种机制.从 ADO.NET 到 LINQ to SQL 再到如今的 ADO.NET Entity Framework,.NET 都 ...

  10. C#_ajax fileupload

    @{ ViewBag.Title = "Index"; Layout = null; } <h2>Index</h2> <script src=&qu ...