仿网页nec首页动画效果
nec链接：http://nec.netease.com/

首先，介绍animation
animation检索或设置对象所应用的动画特效。
animation由“keyframes”这个属性来实现这样的效果。
keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。

关于animation属性介绍：
animation-name：检索或设置对象所应用的动画名称
animation-duration：检索或设置对象动画的持续时间
animation-timing-function：检索或设置对象动画的过渡类型
animation-delay：检索或设置对象动画延迟的时间
animation-iteration-count：检索或设置对象动画的循环次数
animation-direction：检索或设置对象动画在循环中是否反向运动
animation-play-state：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式

nec动画实现原理：
采用三层背景层、气泡层、文字镂空层。气泡层通过animation属性实现了运动效果。

html结构：

<div class="kbanner">

    <div class="knecbg knecone"></div>

    <div class="knecbg knectwo">

        <i></i>

        <i></i>

        <i></i>

        <i></i>

        <i></i>

    </div>

    <div class="knecbg knecthree"></div>

</div>

css样式：

.kbanner{

    position: relative;

    width: 856px;

    height: 366px;

    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_banner1.jpg) center top no-repeat;

}

.knecbg{

    position: absolute;

    left: 150px;

    top: 77px;

    width: 487px;

    height: 186px;

    overflow: hidden;

}

.knecone{

    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left top no-repeat;

    z-index:;

}

.knectwo{

    z-index:;

}

.knecthree{

    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left bottom no-repeat;

    z-index:;

}

.knectwo i{

    position: absolute;

    display: block;

    top: -50px;

    width: 53px;

    height: 56px;

    overflow: hidden;

    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) no-repeat -9999px -9999px;

    -webkit-animation: paoi 7s 2s infinite;

    -moz-animation: paoi 7s 2s infinite;

    -ms-animation: paoi 7s 2s infinite;

    animation: paoi 7s 2s infinite;

}

.knectwo i:nth-child(1){

    left: 25px;

    -webkit-animation-delay: 3s;

    -moz-animation-delay: 3s;

    -ms-animation-delay: 3s;

    animation-delay: 3s;

    background-position: -507px 0;

}

.knectwo i:nth-child(2){

    left: 85px;

    -webkit-animation-delay: 6s;

    -moz-animation-delay: 6s;

    -ms-animation-delay: 6s;

    animation-delay: 6s;

    background-position: -507px -64px;

}

.knectwo i:nth-child(3){

    left: 190px;

    -webkit-animation-delay: 4s;

    -moz-animation-delay: 4s;

    -ms-animation-delay: 4s;

    animation-delay: 4s;

    background-position: -507px -140px;

}

.knectwo i:nth-child(4){

    left: 285px;

    -webkit-animation-delay: 8s;

    -moz-animation-delay: 8s;

    -ms-animation-delay: 8s;

    animation-delay: 8s;

    background-position: -507px 0;

}

.knectwo i:nth-child(5){

    left: 400px;

    -webkit-animation-delay: 5s;

    -moz-animation-delay: 5s;

    -ms-animation-delay: 5s;

    animation-delay: 5s;

    background-position: -507px 0;

}

@-webkit-keyframes paoi {

    0% {

    top:186px;

}

100% {

    top:-56px;

}

}@-moz-keyframes paoi {

    0% {

    top:186px;

}

100% {

    top:-56px;

}

}@-ms-keyframes paoi {

    0% {

    top:186px;

}

100% {

    top:-56px;

}

}@keyframes paoi {

    0% {

    top:186px;

}

100% {

    top:-56px;

}

nec动画效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>仿网易nec首页动画效果</title>
<style>
*{padding: 0px; margin: 0px;}
.kbanner{
position: relative;
width: 856px;
height: 366px;
background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_banner1.jpg) center top no-repeat;
}
.knecbg{
position: absolute;
left: 150px;
top: 77px;
width: 487px;
height: 186px;
overflow: hidden;
}
.knecone{
background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left top no-repeat;
z-index: 1;
}
.knectwo{
z-index: 2;
}
.knecthree{
background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left bottom no-repeat;
z-index: 3;
}
.knectwo i{
position: absolute;
display: block;
top: -50px;
width: 53px;
height: 56px;
overflow: hidden;
background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) no-repeat -9999px -9999px;
-webkit-animation: paoi 7s 2s infinite;
-moz-animation: paoi 7s 2s infinite;
-ms-animation: paoi 7s 2s infinite;
animation: paoi 7s 2s infinite;
}
.knectwo i:nth-child(1){
left: 25px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
background-position: -507px 0;
}
.knectwo i:nth-child(2){
left: 85px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
background-position: -507px -64px;
}
.knectwo i:nth-child(3){
left: 190px;
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
background-position: -507px -140px;
}
.knectwo i:nth-child(4){
left: 285px;
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
background-position: -507px 0;
}
.knectwo i:nth-child(5){
left: 400px;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
background-position: -507px 0;
}
@-webkit-keyframes paoi {
0% {
top:186px;
}
100% {
top:-56px;
}
}@-moz-keyframes paoi {
0% {
top:186px;
}
100% {
top:-56px;
}
}@-ms-keyframes paoi {
0% {
top:186px;
}
100% {
top:-56px;
}
}@keyframes paoi {
0% {
top:186px;
}
100% {
top:-56px;
}
</style>
</head>
<body>
<div class="kbanner">
<div class="knecbg knecone"></div>
<div class="knecbg knectwo">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class="knecbg knecthree"></div>
</div>
</body>
</html>

运行代码

仿网易nec首页动画效果的更多相关文章

  1. javascript仿天猫加入购物车动画效果

    javascript仿天猫加入购物车动画效果   注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...

  2. iOS动画案例(2) 仿网易新闻标题动画

      由于产品的需要,做了一个和网易新闻标题类似的动画效果,现在新闻类的APP都是采用这样的动画效果,来显示更多的内容.先看一下动画效果:   由于这个动画效果在很多场合都有应用,所以我专门封装了一个控 ...

  3. Android应用系列：仿MIUI的Toast动画效果实现（有图有源码）

    前言 相信有些人用过MIUI,会发现小米的Toast跟Android传统的Toast特么是不一样的,他会从底部向上飞入,然后渐变消失.看起来效果是挺不错的,但是对于Android原生Toast是不支持 ...

  4. Android应用系列：仿MIUI的Toast动画效果实现

    前言 相信有些人用过MIUI,会发现小米的Toast跟Android传统的Toast特么是不一样的,他会从底部向上飞入,然后渐变消失.看起来效果是挺不错的,但是对于Android原生Toast是不支持 ...

  5. android 仿网易新闻首页框架

       实现思路很简单左侧栏目是一个一个的 Fragment 的,点击时动态替换各个 Fragment 到当前 Activity 中. 关键代码: public void loadFragment(Ma ...

  6. Jquery仿彩票更换数字动画效果

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script> ...

  7. 【源码分享】仿网易客户端源码效果 apkbus的~

    http://www.apkbus.com/forum.php?mod=viewthread&tid=184867 内容我就不说了,直接点开看吧.

  8. 仿flash的文字动画效果

    .tips{ font-size: 24px; font-family: sans-serif; font-weight: 600; text-shadow: 1px 1px #ffb700; col ...

  9. ToastMiui【仿MIUI的带有动画的Toast】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 仿MIUI的带有动画的Toast 效果图 代码分析 ToastMiui类基于WindowManager 为了和Toast用法保持一致 ...

随机推荐

  1. 一句命令激活windows/office

    激活windows 服务器地址:kms.03k.org (点击检测KMS服务器是否正常) 更新: 脚本维护更新:2016-11-02 服务端版本:2017-06-17 (1111) 有疑问可以戳QQ群 ...

  2. MAC层作用

    对于无线传感网 MAC,顾名思义,就是介质访问控制,是用来控制无线介质的访问的,由于无线传输是共享空中资源的,必然存在多个无线传感器节点对传输介质的争用,MAC层协议就是用来解决这个问题的,包括冲突的 ...

  3. Android Toolbar的使用 顶部标题栏+后退键

    最近设计安卓里面有个标题栏,里面有个后退键,可以完成后退之类的功能. 好,刚好可以用Toolbar去实现 上代码:activity_main.xml <?xml version="1. ...

  4. Oracle 执行报错表空间或临时表空间不足,降低水位线方法

    Oracle 执行语句插入临时表报表空间不足,在增加表空间到最大后依然报错,经分析应该为创建的临时表水位线未清除导致,查询降低水位线方法如下: 原文地址:http://blog.itpub.net/2 ...

  5. 【转】如何使用visual studio将你的程序打包成安装包

    原文地址:https://www.cnblogs.com/SolarWings/p/6132310.html 很久很久以前,我一直有一个梦想,那就是做出一个自己的游戏,这个游戏很像模像样,除了拥有一个 ...

  6. win7下memCache安装过程

    1．下载memcache 的windows 稳定版,解压放某个盘下面,比如在H:/wamp/www/php api/memcache: 2．在终端(即cmd 命令界面)下,输入安装命令 :H:/wam ...

  7. MT29F8G08ABACA nandflash 参数记录

    跟踪 MT29F8G08ABACA datasheet ,记录里面有关软件的参数 首先,硬件上的特征,page size , oob , block size [](http://images2017 ...

  8. Android——黑名单管理（二）

    说明:多加一点完善 1.在操作类 DAO 将连接数据库也放到了构造方法中(错误),加删除全部的方法 2.主界面增加了姓名一栏,用layout文件将对话框分离出来 3.删除加确认提示 4.加删除全部按钮 ...

  9. android开发(28) 做个 指南针 应用

    参考网上的资料,做了个指南针应用玩玩. 步骤: 1.获得 SensorManager. mSensorManager = (SensorManager) getSystemService(SENSOR ...

  10. linq操作符：聚合操作符

    一.Aggregate操作符 Aggregate操作符对集合值执行自定义聚合运算.来看看Aggregate的定义: public static TSource Aggregate<TSource ...