网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
仿网易nec首页动画效果(实现原理+代码)
(编辑:jimmy 日期: 2024/11/1 浏览:
2
)
仿网页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(//img.jbzj.com/file_images/article/201306/o_pao.png) left top no-repeat;
z-index: 1;
}
.knectwo{
z-index: 2;
}
.knecthree{
background: url(//img.jbzj.com/file_images/article/201306/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(//img.jbzj.com/file_images/article/201306/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 {
% {
top:186px;
}
% {
top:-56px;
}
}@-moz-keyframes paoi {
% {
top:186px;
}
% {
top:-56px;
}
}@-ms-keyframes paoi {
% {
top:186px;
}
% {
top:-56px;
}
}@keyframes paoi {
% {
top:186px;
}
% {
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(//img.jbzj.com/file_images/article/201306/o_banner1.jpg) center top no-repeat; } .knecbg{ position: absolute; left: 150px; top: 77px; width: 487px; height: 186px; overflow: hidden; } .knecone{ background: url(//img.jbzj.com/file_images/article/201306/o_pao.png) left top no-repeat; z-index: 1; } .knectwo{ z-index: 2; } .knecthree{ background: url(//img.jbzj.com/file_images/article/201306/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(//img.jbzj.com/file_images/article/201306/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>
提示:您可以先修改部分代码再运行
上一篇:
Button未设type属性时在非IE6/7中具有submit特性并自动提交form
下一篇:
div+css背景渐变色代码示例
最新资源
群星《十五首男声金曲2》DTS-WAV
2024年08月05日
柏菲·珞叔作品集《金色大厅2》限量开盘母带ORMC
NS版《人中之龙 极》演员本宫泰风饰演父亲的广告
英国女性Switch用户占比达到47% 5年内翻了一番!
外媒:《死亡岛2》或是今年PS+2档最受欢迎游戏
群星.1997-世纪之歌第二辑6CD【宝丽金】【WAV+C
邵萱.1997-是是非非【捷登】【WAV+CUE】
巫启贤.1998-我是你的【风格】【WAV+CUE】
【原神手游】「月草的赐慧」祈愿
首页
音乐
电影
资源