仿网页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. OpenCV探索之路（十七）：Mat和IplImage访问像素的方法总结

    在opencv的编程中,遍历访问图像元素是经常遇到的操作,掌握其方法非常重要,无论是Mat类的像素访问,还是IplImage结构体的访问的方法,都必须扎实掌握,毕竟,图像处理本质上就是对像素的各种操作 ...

  2. java 多线程 24 ： 线程组

    线程组 可以把线程归属到某一个线程组中,线程组中可以有线程对象,也可以有线程组,组中还可以有线程,这样的组织结构有点类似于树的形式,如图所示: 线程组的作用是:可以批量管理线程或线程组对象,有效地对线 ...

  3. mysql查询字段为null 返回0

    SELECT   IF(AVG(字段) IS NULL,0, 字段) as 重命名   From  xxx

  4. R语言统计分析应用与SAS、SPSS的比较

    能够用来做统计分析的软件和程序很多,目前应用比较广泛的包括:SPSS, SAS.R语言,Matlab,S-PLUS,S-Miner等.下面我们来看一下各应用的特点: SPSS: 最简单的,都是菜单操作 ...

  5. Maven项目编译后classes文件中没有.xml问题

    在做spring+mybatiss时,自动扫描都配置正确了,却在运行时出现了如下错误.后来查看target/classes/.../dao/文件夹下,发现只有mapper的class文件,而没有xml ...

  6. display:box的兼容写法

    .box{ /* display */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; ...

  7. 修改Windows和linux系统时间

    1.修改本机Windows的系统时间,Java代码实现: import java.io.IOException; import java.text.SimpleDateFormat; import j ...

  8. git 无法提交空目录

    git不能提交子文件夹?   空目录无法add,在最里面的目录下加上随便加上一个txt就可以了

  9. webpack6--css 背景图片处理

    当css里面含有背景图片,用webpack打包时会报如下错: 如何处理这个问题呢? 我们需要借助于 file-loader 和  url-loader 这2个包. 下面具体说一下步骤: 1.安装 fi ...

  10. R语言包_dplyr_1

    有5个基础的函数: - filter - select - arrange - mutate - summarise - group_by (plus) 可以和databases以及data tabl ...