仿网页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. Linux: grep多个关键字“与”和“或”

    1.或操作 grep -E '123|abc' filename // 找出文件(filename)中包含123或者包含abc的行 egrep '123|abc' filename // 用egrep ...

  2. MAC下是用brew安装Redis

    启动redis redis-server /etc/redis.conf 安装brew 在命令行里运行下面的命令,需要等待一段时间. ruby -e "$(curl -fsSL https: ...

  3. csu1356 ：判断一个环是否为奇数环

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1356 题意:给出一个起始点,一些边,有人从这个起始点开始随意走,问在某一个时候,它是否可以处于任意 ...

  4. 5. 集成学习（Ensemble Learning）GBDT

    1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...

  5. 手记：配置IIS服务器，支持sis、SISX、3GP、ADP、AMR、JAD、JAR、MMF、MFM、PMD、UMD等文件下载

    发此博文原因是遇到一个 手机端读取服务器端.amr格式文件失败的例子.   反复测试发现从服务端无法播放,或下载.amr格式的文件.就想到可能是服务器站点托管服务 IIS不支持对.amr格式的解析,意 ...

  6. git pull出现There is no tracking information for the current branch

    使用git pull 或者 git push 的时候报错 gitThere is no tracking information for the current branch. Please spec ...

  7. lateral view

    原文地址:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+LateralView# lateral view用于和spl ...

  8. Route学习笔记之Area的Route注册

    前一段时间接触了MVC的Area可以将模型.控制器和视图分成各个独立的节点.分区之后,区域路由注册的需求就出来了. 默认的 在MVC项目上右键添加区域之后,在文件夹下会自动添加一个FolderName ...

  9. PHP与Java进行通信的实现方法

    缘起: 最近做了一个电商平台与网银整合的小东西,程序是开源的 Ecmall的,网银的接口也很规范,给出的文档很全,唯一的小问题是,网银使用的签名和验签的lib是只有java和c的,对java还熟悉一些 ...

  10. jQuery（六）：value值操作

    val()可以获取或设置元素的value属性值.语法如下: 示例: <!DOCTYPE html> <html lang="en"> <head> ...