仿网易nec首页动画效果(实现原理+代码)

ttx9n · 发表于 2013-6-19 17:26:06

首先介绍关于animation属性；nec动画实现原理：采用三层背景层、气泡层、文字镂空层。气泡层通过animation属性实现了运动效果，具体实现如下，感兴趣的朋友可以参考下哈仿网页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(//files.jb51.net/file_images/article/201306/o_pao.png) left top no-repeat;
z-index: 1;
}
.knectwo{
z-index: 2;
}
.knecthree{
background: url(//files.jb51.net/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(//files.jb51.net/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(//files.jb51.net/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(//files.jb51.net/file_images/article/201306/o_pao.png) left top no-repeat; 
z-index: 1; 
} 
.knectwo{ 
z-index: 2; 
} 
.knecthree{ 
background: url(//files.jb51.net/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(//files.jb51.net/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>

提示：您可以先修改部分代码再运行

额呵呵 · 发表于 2022-9-27 17:33:44

额头额定法国队是范德萨

Alisaliu · 发表于 2022-10-21 15:34:53

大家都不容易！

白狐软件 · 发表于 2022-12-9 09:31:40

建军节建军节建军节建军节

平平安安 · 发表于 2023-1-24 15:30:15

2222222222222222

3pjdk29w · 发表于 2023-4-27 09:26:14

儿飞飞微风DVD谁vdsvd

Alisaliu · 发表于 2023-8-23 21:27:42

下载来瞧瞧

do827261756 · 发表于 2023-10-3 00:19:53

笑纳了老板

feiyasqhr · 发表于 2023-11-14 05:53:55

额UI废物iuhfujewfiewnnfen

sykzus · 发表于 2024-3-12 23:14:11

收下来看看怎么样

账号		自动登录	找回密码
密码			立即注册

[CSS] 仿网易nec首页动画效果(实现原理+代码)

相关帖子