仿网页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. delphi调用webservice (.NET C#版)

    uses XMLIntf, XMLDoc; XML to XTR文件转换 .File-->open打开你要分析的XML文件 .在左边选择你要分析的接点,双击加到中间的转换列表中 .Create- ...

  2. browser_autopwn2

    browser_autopwn2是个啥玩意儿? 一个集合了浏览器漏洞的小框架 option msf > use auxiliary/server/browser_autopwn2 msf aux ...

  3. 【WPF】代码触发Button点击事件

    先定义Button按钮并绑定事件. public void test() { Button btn = new Button(); btn.Click += Btn_Click; } private ...

  4. 【Java】使用BigDecimal类进行精确小数计算

    在商业计算中(尤其是计算价格)需要使用BigDecimal类来进行精确小数计算,因为用其他类型计算(如double)得到的结果不是精确的! 写个测试类. import org.junit.Test; ...

  5. java - 分页类

    pager.java package com.jspnews.util; import java.io.Serializable; import java.util.List; /** * * < ...

  6. PHP开发安全问题总结

    php给了开发者极大的灵活性,但是这也为安全问题带来了潜在的隐患,近期需要总结一下以往的问题,在这里借翻译一篇文章同时加上自己开发的一些感触总结一下. 简介 当开发一个互联网服务的时候,必须时刻牢记安 ...

  7. 经典ajax 状态响应图

  8. 安卓程序代写 网上程序代写[原]BluetoothDevice详解

    一. BluetoothDevice简介 1. 继承关系 public static Class BluetoothDevice extends Object implement Parcelable ...

  9. [maven] 项目不同环境自动打包

    应用背景 项目需要发布到本地环境,测试环境和生产环境甚至不同的生产环境上.这时候配置文件的一些参数需要被频繁的修改来修改去.为了解决这样的繁琐工作,就得使用maven profile特性. 步骤 1. ...

  10. VidLoc: A Deep Spatio-Temporal Model for 6-DoF Video-Clip Relocalization

    用双向lstm对序列图片做相机定位.