<!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. dom4j的quickstart

    我所理解的dom4j就是用来解析XML文档的,XML文档的重要性不言而喻,用过框架的人谁不知道呢,是不是.但是实际上需要我们自己来解析XML文档的应用场景感觉不是很多,毕竟该解析的XML都已经被框架很 ...

  2. 【树莓派】关于tinyproxy问题处理

    一.tinyproxy服务启动问题解决 在配置好树莓派的设备上,发现 tinyproxy 启动时候存在问题,如下图: 经过半天的折腾,后来发现原来是由于异常关机导致临时文件生成错误 解决办法:删除/t ...

  3. 如何为CriteriaOperator过滤对象转换为lambda表达式，即：linq to xpo的动态where语句

    How to convert the CriteriaOperator to a lambda expression, so, the latter expression can be used in ...

  4. RealSense开发-Session和SenseManager的几种创建方法

    从Intel RealSense 的SDK文档对其架构(如图1所示)的始描述可知,Session是SDK应用的主控模块,必须在所有模块操作之前创建,并且在所有模块注销后最后注销.SenseManage ...

  5. AVSampleBufferDisplayLayer----转

    http://blog.csdn.net/fernandowei/article/details/52179631 目前大多数iOS端的视频渲染都使用OpenGLES,但如果仅仅为了渲染而不做其他的例 ...

  6. MFC编程入门之二十二（常用控件：按钮控件Button、Radio Button和Check Box）

    本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...

  7. PBOC金融IC卡，卡片与终端交互的13个步骤，简介-第二组(转)

    四:脱机数据认证-可选终端进行脱机数据认证来,认证卡片.记住:对于某个事情,终端与卡片谁单独也说了不算,要二者都能干才能干. 终端依据卡片(AIP)和终端(终端性能)的支持情况,决定是否使用及使用哪种 ...

  8. 虚拟centos7 用ssh登录

    在虚拟机(Vmware Workstation)下,安装了CentOS7,现在想通过SSH工具连接虚拟机中的CentOS7 1.  首先,要确保CentOS7安装了  openssh-server,在 ...

  9. oracle 的分析函数

    row_number() over(partition by ... order by ...) rank() over(partition by ... order by ...) dense_ra ...

  10. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...