<!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. Swift_2基础

    mport Foundation // MARK: - ?和!的区别// ?代表可选类型,实质上是枚举类型,里面有None和Some两种类型,其实nil相当于OPtional.None,如果非nil相 ...

  2. heart beat/心跳包

    为什么需要heart beat/心跳包?因为tcp keep-alive不能满足人们的实时性的要求,就是这么简单. socket的长时间连接的话,是需要心跳包.心跳包就是维持双方的连接,每隔一段时间发 ...

  3. Spring MVC简介

    Spring MVC简介 Spring MVC框架是有一个MVC框架,通过实现Model-View-Controller模式来很好地将数据.业务与展现进行分离.从这样一个角度来说,Spring MVC ...

  4. Hangfire项目使用

    基本介绍: hangfire 主要用于根据设置时间来执行任务,间隔几分钟执行一次,每天几点钟执行一次,如此执行任务. 方法: backgroundjob.enqueue(()=>"要执 ...

  5. nodejs的第五天学习笔记

    一.调试nodejs代码 1)使用console.log() 使用麻烦,用了以后还要删除 2)nodejs的自带调试器 -node debug a.js 没有任何作用,一个玩具,将来有一天可以会变得强 ...

  6. java, listmap2json, fastjson

    import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;impor ...

  7. webstorm node 3000端口被占用

    首先说明我的问题原因,一个服务端程序用3000端口打开后,未关闭,直接强制关闭的webstorm,关闭的时候提示disconnect了,也点击了,但是打开另外一个文件,再用3000端口打开的话会提示被 ...

  8. [C语言入门笔记]循环与运算符

    循环与运算符 什么是循环? 循环就是一个不停工作的东西,可以反复的实现一个功能,这个才是计算机的重点.计算机可以重复的做一件事情,这样子可以省很多事情 循环的种类有哪些? While Do while ...

  9. MEF 生命周期PartCreationPolicy

    为什么要单独把这个生命周期捞出来单独说一说呢?因为我今天就被这个东东坑了一把……新加了一个界面,第二次打开界面的时候会报错“指定的元素已经是另一个元素的逻辑子元素”.好嘛,我一看,哟,感觉就是xaml ...

  10. 20145236 GDB调试汇编堆栈过程分析

    GDB调试汇编堆栈过程分析 首先需要输入sudo apt-get install libc6-dev-i386安装一个库才能产生汇编代码,然后输入gcc - g example.c -o exampl ...