<!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. test homework2 ~ faulty program

    Program1:

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. validate插件深入学习-02 常用方法和validate对象的方法

    ①检查表单元素是否有效 valid() 在表单内添加<button id="check">检查</button> $('#check').click(fun ...

  4. 1006. Sign In and Sign Out (25)

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  5. ZigBee 安全探究

    ZigBee 安全探究 0x02 ZigBee安全机制 (注:对于本节内容,可能在新版ZigBee协议标准中会有所变化,请以新版为准.) ZigBee主要提供有三个等级的安全模式: 1. 非安全模式: ...

  6. 参考__MySql

    博客 三范式 事务隔离级别 列表

  7. TCP/IP 三次握手-四次挥手

    TCP的建立需要三次握手,断开需要四次挥手. 首先三次握手: 首先,客户机向服务器发送请求报文,服务器回复ACK,并分配资源,而客户端接受到ACK后回复确认报文,并分配资源,此时三次握手完成. 四次挥 ...

  8. 一个servlet处理多个功能

    servlet中: String servletPath = request.getServletPath(); String methodName = servletPath.substring(1 ...

  9. java中String对象的split方法

    在java.lang包中有String.split()方法,返回是一个String[]数组,今天碰到一个自己没注意的问题: 1.特殊分隔符 String str1 = "123|456|78 ...

  10. [原创] 【2014.12.02更新网盘链接】基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装

    [原创] [2014.12.02更新网盘链接]基于EasySysprep4.1的 Windows 7 x86/x64 『视频』封装 joinlidong 发表于 2014-11-29 14:25:50 ...