仿网页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. idea 开启 problems自动代码检查

    勾上此处 会自动出现 疑问 可能需要装 problems view插件

  2. hdu1102（最小生成树水题）

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...

  3. python 字符串格式化转换类型

  4. cacti监控jvm

    jdk环境 java version "1.6.0_37" Java(TM) SE Runtime Environment (build 1.6.0_37-b06) Java Ho ...

  5. [ntp]查看ntp服务器的连接情况

    转自:http://www.cnblogs.com/liuyou/archive/2012/07/29/2614338.html 命令和工具 # watch ntpq -p # ntpq -p, /e ...

  6. java.io.ByteArrayOutputStream 源码分析

    ByteArrayOutputStream 内部包含了一个缓冲区,缓冲区会随着数据的不断写入而自动增长,俗称内存流. 首先看一下俩个属性,buf是内部缓冲区,count是记录写入了多少个字节. pro ...

  7. .Net中的内存分配问题

    最近在测试的时候,要求测试内存不足的情况.我不想去开很多的程序来占用内存,那样太麻烦了,也不太精确.于是就写一个小程序来占用内存,想法很简单,就是声明一个Byte数组在占用内存,没想到这么简单的想法却 ...

  8. 【转】c#的逆向工程-IL指令集

    转载自:http://www.cnblogs.com/davyjiang/articles/1337400.html 一些 IL 语言解释: 跳转指令集合Beq 如果两个值相等,则将控制转移到目标指令 ...

  9. php 验证码代码

    1.js代码 function fleshVerify(type){ //重载验证码 var timenow = new Date().getTime(); if (type) { $('verify ...

  10. mock数据和代码生成

    git clone https://gitee.com/fleam/CodeGeneration.git