<!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. FAQ

    1.Baudrare and the speed of Byte. 2. Linux FS and Flash store. 3. SW's Coupling. 4. Protocol and Pro ...

  2. RSA5、RSA6

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. my.cnf

    skip-external-locking skip-name-resolve back_log= key_buffer_size=384M max_allowed_packet=4M thread_ ...

  4. python成长之路【第十二篇】：RabbitMQ入门

    一.RabbitMQ介绍 解释RabbitMQ,就不得不提到AMQP(Advanced Message Queuing Protocol)协议. AMQP协议是一种基于网络的消息传输协议,它能够在应用 ...

  5. HTML5扩展之微数据与丰富网页摘要

    一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使 ...

  6. 【Java】多线程_学习笔记

    多线程 1.进程 进程:当一个程序进入内存运行时,它就成为了进程.进程具有独立性.动态性.并发性. A.独立性:进程是系统中独立存在的实体,它可以拥有自己独立的资源,每一个进程都拥有自己私有的地址空间 ...

  7. layer弹出层全屏及关闭

    一.首先引用JS文件 <script src="../../js/common/layer/layer.js"></script> 二.全屏调用以下代码 v ...

  8. java单例类/

    java单例类  一个类只能创建一个实例,那么这个类就是一个单例类 可以重写toString方法 输出想要输出的内容 可以重写equcal来比较想要比较的内容是否相等 对于final修饰的成员变量 一 ...

  9. Spring aop 记录操作日志 Aspect

    前几天做系统日志记录的功能,一个操作调一次记录方法,每次还得去收集参数等等,太尼玛烦了.在程序员的世界里,当你的一个功能重复出现多次,就应该想想肯定有更简单的实现方法.于是果断搜索各种资料,终于搞定了 ...

  10. jQuery 表格删除，添加行

    var colsNum = 4; 1,$(document),ready(function () { $.("#id1").parent().after('<tr class ...