<!doctype html>

<html>

<head>

	<meta charset="utf-8" />

<style>

html,body{ margin:0; padding:0}

#fa{

	width:800px;

	height:30px;

	background-color:#777;

	list-style:none;

	display:inline-block;

	padding:0;

	margin:200px 20%;

	position:relative;

	color:#fff;

	overflow:hidden;

	}

#fa li{ width:100px; height:30px; line-height:30px; text-align:center; display:inline-block; float:left;}

#fa li:hover{ cursor:pointer}

#fa li:first-child:hover{ animation: one 0.7s; background-color:#CC0}

#fa li:nth-child(2):hover{ animation: two 0.7s; background-color:#6F9}

#fa li:nth-child(3):hover{ animation: three 0.7s; background-color:#0C6}

#fa li:nth-child(4):hover{ animation: four 0.7s; background-color:#C66}

#fa li:nth-child(5):hover{ animation: five 0.7s; background-color:#993}

#fa li:nth-child(6):hover{ animation: six 0.7s; background-color:#FF3}

#fa li:nth-child(7):hover{ animation: seven 0.7s; background-color:#3F6}

#fa li:last-child:hover{ animation: eight 1.2s; background-color:#3C6}

@keyframes one

{

	0% { transform:scale(1,1)}

	25% { transform:scale(0.8,0.8)}

	50% { transform:scale(1,1)}

	75% { transform:scale(0.8,0.8)}

	100% { transform:scale(1,1)}

}

@keyframes two

{

	0% { transform: translate(0,0)}

	10% { transform: translate(10px,0)}

	20% { transform: translate(0,0)}

	30% { transform: translate(10px,0)}

	40% { transform: translate(0,0)}

	50% { transform: translate(10px,0)}

	60% { transform: translate(0,0)}

	70% { transform: translate(10px,0)}

	80% { transform: translate(0,0)}

	90% { transform: translate(10px,0)}

	100% { transform: translate(0,0)}

}

@keyframes three

{

	0% { transform: rotate(0)}

	25% { transform:rotate(20deg)}

	50% { transform:rotate(-20deg)}

	75% { transform:rotate(20deg)}

	100% { transform:rotate(0)}

}

@keyframes four

{

	0% { transform: rotate(0)}

	20% { transform:rotate(20deg)}

	40% { transform:rotate(30deg)}

	60% { transform:rotate(20deg)}

	80% { transform:rotate(30deg)}

	100% { transform:rotate(0)}

}

@keyframes five

{

	0% { opacity:1}

	25% { opacity:0}

	50% { opacity:1}

	75% { opacity:0}

	100% { opacity:1}

}

@keyframes six

{

	0% { margin-top:0}

	25% { margin-top:-10px}

	50% { margin-top:0}

	75% { margin-top:-5px}

	100% { margin-top:0}

}

@keyframes seven

{

	0% { transform:rotateY(180deg)}

	100% { transform:rotateY(0)}

}

@keyframes eight

{

	0% { transform:rotate(0)}

	50% { transform:rotate(360deg)}

	100% { transform:rotate(0)}

}

</style>

</head>

<body>

<ul id="fa">

    <li>缩放</li>

    <li>移动</li>

    <li>倾斜</li>

    <li>倾斜震动</li>

    <li>闪烁</li>

    <li>上下震动</li>

    <li>Y轴旋转</li>

    <li>大旋转</li>

</ul>

<div style="clear:both"></div>

</body>

</html>

　　

导航效果css的更多相关文章

  1. CSS实现商城分类导航效果（hover选择器）

    学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...

  2. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  3. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  4. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  5. 第74天：jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  7. 如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果？

    目录: 一.概述 最近在做一个新闻类结合社区的APP的时候,需要添加一个侧滑菜单的效果,考虑到可以使用DrawerLayout布局,但是问题是使用了 DrawerLayout布局后,主页内容应该是一个 ...

  8. Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果

    在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...

  9. 爱心跳动效果 CSS实现

    爱心跳动效果 CSS实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...

随机推荐

  1. linux下关掉teamviewer服务

    一.情景介绍 OS: ubuntu14.04 64bit teamviewer版本:10.0.36281 刚才看见已经关掉了teamviewer,但是通过ps看以下进程情况,却还存在该进程,于是: 二 ...

  2. unreal 自定义 Slate Style Sets

    搜集到的最有价值的一篇教学,按照作者的方法尝试中遇到了一些问题.[感谢这位作者!] 网址:https://wiki.unrealengine.com/Slate_Style_Sets_Part_2 在 ...

  3. android面试题

    1. 请描述一下Activity 生命周期. 答: 如下图所示.共有七个周期函数,按顺序分别是: onCreate(), onStart(), onRestart(), onResume(), onP ...

  4. B/S网站中IE6兼容问题

    在HTML中定义的样式,部分样式在IE7以前的版本中的效果是不同的,所以需要在网页中定义让浏览器以IE8的模式启动. 在HEAD中定义标签meta如下: <meta http-equiv=&qu ...

  5. golang os/exec 执行外部命令

    exec包执行外部命令,它将os.StartProcess进行包装使得它更容易映射到stdin和stdout,并且利用pipe连接i/o． func LookPath(file string) (st ...

  6. centos 更新linux内核

    之前一直使用centos 7系统进行开发,centos 7.0 系统自带的linux内核版本为 linx 3.10,最近开发需要使用到socket的reuse port特性,该特性在linux 3.9 ...

  7. SAP 采购订单收货时报错：对于采购订单xxxx无收货可能

    因为这个问题查了挺长时间,所以写在博客里记录下. 报错详细: 每个公司的配置不同,我公司遇到的这个问题原因是这里的确认控制是从信息记录带过来的,问题解决方法是,修改下确认控制的选项: 修改确认控制的后 ...

  8. Sql Server R2还有备份数据库错误

    错误信息描述  该数据库是运行版本10.50.1600的服务器上备份的.该版本与此服务器(运行版本10.00.1600)不兼容.请在支持该被份的服务器上还原该数据,  或者使用与此服务器兼容的备份(M ...

  9. Android开发：在布局里移动ImageView控件

    在做一个app时碰到需要移动一个图案的位置,查了一上午资料都没找到demo,自己写一个吧 RelativeLayout.LayoutParams lp = new RelativeLayout.Lay ...

  10. SPSS数据分析—最优尺度回归

    在之前介绍的线性回归模型中,有一个隐含的假设是自变量均为连续变量,但实际上自变量有时候是分类变量,类似于方差分析中的因素,这种分类自变量在回归分析中,也默认作为连续变量使用,这就会产生一个问题,如果是 ...