仿网易nec首页动画效果

来源：互联网发布：工程结构优化设计基础编辑：程序博客网时间：2024/05/16 14:53

仿网页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: 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;}

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>