仿网易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用法保持一致 ...
随机推荐
- csv和excel互转
Python csv转换为excel学习笔记: openpyxl模块需要安装pip install openpyxl import openpyxl import csv '''读取csv文件写入ex ...
- uboot——之初体验
官方下载地址:ftp://ftp.denx.de/pub/u-boot/ uboot的终极奥义就是启动内核. 但是,现在,我们先做最基本的,去官网下载一个支持自己板子的uboot,然后解压缩,打补丁. ...
- Ubuntu 16.04 64位安装arm-linux-gcc交叉编译器以及samba服务器
交叉编译器是嵌入式开发的必要工具,但是由于目前大多数人使用64位ubuntu,在照着很多教程做的时候,就会失败,失败原因是64位ubuntu需要额外安装32位的兼容包.以arm-linux-gcc-3 ...
- Android——开源框架Universal-Image-Loader + Fragment使用+轮播广告
原文地址: Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用 Android 开源框架Universal-Image-Loader完全解析(二) ...
- face alignment---各种算法框架
[深度学习]最新的一些开源face alignment及评价 转载 2017年01月12日 11:33:39 2047 dlib :https://github.com/davisking/dlib ...
- hadoop脑裂
今天修改了和journalNode通信的zookeeper配置,原来没有打开zookeeper动态清理快照的功能. 所以3台zookeeper节点,每台修改完配置后,然后重启了下zookeeper服务 ...
- 【C】——可变参数
写代码之前要先介绍一下可变参数的备用知识: C函数要在程序中用到以下这些宏: void va_start( va_list arg_ptr, prev_param ); type va_arg( va ...
- Windows下超强日志工具BareTail
最近写了一些测试工具,经常希望能动态的查看日志文件,试了好些文本编辑文件如Emeditor.Vim等,一直没找到合适. 我希望支持的功能有: 支持大文件读取,速度要快 自动加载新的内容,直接定位到最后 ...
- webpack7--css压缩成单独的css文件
先看下下面的图片: 我们可以看到,通过Webpack打包后,默认CSS是通过 内部样式表 写入的.我们如何把压缩后的CSS单独导出为CSS 呢? 1.安装 extract-text-webpack-p ...
- jquery miniui 学习笔记
1.取组件值 传递form data,load发送 请求加载数据 <script type="text/JavaScript"> mini.parse(); // ...