仿网易nec首页动画效果
仿网页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首页动画效果的更多相关文章
- javascript仿天猫加入购物车动画效果
javascript仿天猫加入购物车动画效果 注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中 ...
- iOS动画案例(2) 仿网易新闻标题动画
由于产品的需要,做了一个和网易新闻标题类似的动画效果,现在新闻类的APP都是采用这样的动画效果,来显示更多的内容.先看一下动画效果: 由于这个动画效果在很多场合都有应用,所以我专门封装了一个控 ...
- Android应用系列：仿MIUI的Toast动画效果实现（有图有源码）
前言 相信有些人用过MIUI,会发现小米的Toast跟Android传统的Toast特么是不一样的,他会从底部向上飞入,然后渐变消失.看起来效果是挺不错的,但是对于Android原生Toast是不支持 ...
- Android应用系列：仿MIUI的Toast动画效果实现
前言 相信有些人用过MIUI,会发现小米的Toast跟Android传统的Toast特么是不一样的,他会从底部向上飞入,然后渐变消失.看起来效果是挺不错的,但是对于Android原生Toast是不支持 ...
- android 仿网易新闻首页框架
实现思路很简单左侧栏目是一个一个的 Fragment 的,点击时动态替换各个 Fragment 到当前 Activity 中. 关键代码: public void loadFragment(Ma ...
- Jquery仿彩票更换数字动画效果
<script type="text/javascript" src="jquery-1.11.3.min.js"></script> ...
- 【源码分享】仿网易客户端源码效果 apkbus的~
http://www.apkbus.com/forum.php?mod=viewthread&tid=184867 内容我就不说了,直接点开看吧.
- 仿flash的文字动画效果
.tips{ font-size: 24px; font-family: sans-serif; font-weight: 600; text-shadow: 1px 1px #ffb700; col ...
- ToastMiui【仿MIUI的带有动画的Toast】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 仿MIUI的带有动画的Toast 效果图 代码分析 ToastMiui类基于WindowManager 为了和Toast用法保持一致 ...
随机推荐
- s3c2440——实现裸机的简易printf函数
在单片机开发中,我们借助于vsprintf函数,可以自己实现一个printf函数,但是,那是IDE帮我们做了一些事情. 刚开始在ARM9裸机上自己写printf的实现的时候,包含对应头文件也会提示vs ...
- S3C2440的七种模式之——未定义模式（去掉bl print1 bug解决）
现在做第一个实验,模拟未定义模式. 未定义模式,是cpu遇到自己不能识别的指令时候做出的异常处理. arm指令的机器码一定是按照某种规范要求的,不然你随意写一条指令,cpu不是都可以执行吗?在cpu没 ...
- Inner Functions - What Are They Good For?
Referece: https://realpython.com/blog/python/inner-functions-what-are-they-good-for/ Let’s look at t ...
- Oracle 自启动配置
最后是放在rc.d/rc.local 里面,否则脚本编写错误 Linux有可能都启不来 [root@ChenJun-CentOS6 bin]# vi /etc/init.d/oracle #!/bi ...
- YII登陆错误 mcrypt_create_iv()
使用php框架YII进行开发的时候,虽然很快,性能很好,但是也有一些小问题,现在记录下来. 1.在使用gii的自动代码生成后,登陆系统,就会报错 mcrypt_create_iv() [<a h ...
- [转]启动Tomcat提示：指定的服务未安装
原文地址:http://blog.csdn.net/yilip/article/details/8066246 新下载的Tomcat7.0 解压缩完了运行tomcat7.exe屏幕一闪就没了 运行to ...
- 卡西欧（casio）Fx-5800p程序调试器||模拟器V1.0
一.[背景] 都说这个卡西欧5800p没有模拟器,模拟器其实就是个电脑上面模拟他的界面的东西,但是真正的核心,他不一定有,而且我们测量方面的编程及时有了所谓的外形模拟器也学不会的. 都说这个卡西欧58 ...
- 【Unity】角色受伤后的闪烁（blink/flash）效果
玩家受伤后,一段时间内快速闪烁.这里想要的闪烁效果是玩家快速的显隐切换效果,而不是玩家变白的情况. 快速切换玩家的显隐效果不能用SetActive修改角色物体本身的激活状态,因为玩家角色身上的其他脚本 ...
- <跟股市谚语学炒股> 读书笔记
书在这里 一般情况下,当成交清单上显示的买盘金额大.笔数少,卖盘金额小.笔数多时,系主力在建仓.散户在卖出:相反,若买盘金额小.笔数多,卖盘金额大.笔数少时,系主力在出货.散户在买入 一般来说,当大盘 ...
- rfid 125khz
环境是STVD V4.1.6, 编译器是COSMIC STM8 C Compiler 16K ,Version: 4.3.1 调用的库有:GPIO,TIM2 相关宏定义: //RF数据引脚 #defi ...