导航效果css
<!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的更多相关文章
- CSS实现商城分类导航效果（hover选择器）
学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...
- css之纯css实现流程导航效果
:::tip 使用纯css线上 流程导航效果. 本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪 该方法IE下不支持 利用裁剪 clip ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
- 第74天：jQuery实现图片导航效果
图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 基于 jQuery 实现的精致作品集图片导航效果
今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...
- 如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果？
目录: 一.概述 最近在做一个新闻类结合社区的APP的时候,需要添加一个侧滑菜单的效果,考虑到可以使用DrawerLayout布局,但是问题是使用了 DrawerLayout布局后,主页内容应该是一个 ...
- Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...
- 爱心跳动效果 CSS实现
爱心跳动效果 CSS实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...
随机推荐
- Mifare系列7-安全性（转）
文/闫鑫原创转载请注明出处http://blog.csdn.net/yxstars/article/details/38087245 飞利浦的MIFARE卡 由于它的高安全性在市场上得到广泛应用,比如 ...
- Hbase的配置和安装
Hbase的配置和安装 1. 解压hbase.配置HBASE_HOME tar -zxvf hbase-1.2.4.tar.gz 2. 修改$HBASE_HOME/conf/hbase-env.sh文 ...
- 【积累】validate验证框架的使用
validate验证框架的使用:用验证框架可以很方便的验证前端页面输入的内容可以自定义验证方法 内容:0:环境搭建 1:基础用法 2:自定义用法 0:基本环境的搭建 0.1:下载js文件 0.2:引入 ...
- 分布式消息队列 Kafka
分布式消息队列 Kafka 2016-02-25 杜亦舒 Kafka是一个高吞吐量的.分布式的消息系统,由Linkedin开发,开发语言为scala具有高吞吐.可扩展.分布式等特点 适用场景 活动数据 ...
- AutoCAD Civil 3D 中缓和曲线的定义
本文对AutoCAD Civil 3D中缓和曲线的定义进行了整理. 原英文网页如下: https://knowledge.autodesk.com/support/autocad-civil-3d/l ...
- 如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- Python常用内置函数总结
一.数学相关 1.绝对值:abs(-1)2.最大最小值:max([1,2,3]).min([1,2,3])3.序列长度:len('abc').len([1,2,3]).len((1,2,3))4.取模 ...
- HTML5新增标签
section标签 <section>标签,定义文档中的节.比如章节.页眉.页脚或文档中的其它部分.一般用于成节的内容,会在文档流中开始一个新的节.它用来表现普通的文档内容或应用区块,通 ...
- javac 导入第三方jar包
如果是导入一个包,只需要 javac -classpath xxx/xxx/xxx.jar xxx.java 即可 如果有多个包,windows下用分号隔开,Lunix下用冒号隔开即可.
- Takeown--夺取文件or文件夹所有权
强制将当前目录下的所有文件及文件夹.子文件夹下的所有者更改为管理员组(administrators)命令:takeown /f * /a /r /d y 将所有d:\documents目录下的文件.子 ...