导航效果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实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...
随机推荐
- centos 带S权限的二进制
早上写的一个用find查找带S权限的,感觉不记一下可惜了. [root@iZ28wg1kditZ ~]# find / -type f -exec ls -al {} \;|awk 'BEGIN {p ...
- asp.net mvc bundle中数组超出索引
在使用bundle 来加载css的时候报错了, @Styles.Render("~/bundles/appStyles") 第一反应 以为是的css 太多了,可是当我这个style ...
- window.onload和window.onscroll
之前我的一个页面里写了引入了2个js,一个是包含置顶的侧面客服,一个是定位导航.2个开始都用了window.onload,发现第一个js的定位导航没有显示,被第2个js覆盖了,当我去掉第2个js的wi ...
- 学习PHP 逛的几个网站。
PHP 第一社区 http://www.php1.cn/ 51cto php开发 http://developer.51cto.com/col/1441/ phphub https://phphub. ...
- webpack和gulp的区别
Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧.Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说, ...
- Kafka是如何实现高吞吐率的
Kafka是如何实现高吞吐率的 原创 2016-02-27 杜亦舒 性能与架构 Kafka是分布式消息系统,需要处理海量的消息,Kafka的设计是把所有的消息都写入速度低容量大的硬盘,以此来换取更强的 ...
- 编译2.4.X apache 常见错误
安装高版本的 apr apr-util ./configure prefix=/usr/local/apr ./configure prefix=/usr/local/apr-util -- ...
- SSIS学习笔记
SSIS全称(Sql Server Integration Services),是 Microsoft BI 解决方案的一大利器.除了作为ETL的一种工具,在以下方面还有着突出的表现: (1) 系统维 ...
- iOS 页面间几种传值方式（属性，代理，block，单例，通知）
第二个视图控制器如何获取第一个视图控制器的部分信息 例如 :第二个界面中的lable显示第一个界面textField中的文本 这就需要用到属性传值.block传值 那么第一个视图控制器如何获的第二个视 ...
- 7 -- Spring的基本用法 -- 6...
7.6 Spring 3.0 提供的Java配置管理 Spring 允许使用Java类进行配置管理,可以不使用XML来管理Bean,以及Bean之间的依赖关系. Interface :Person p ...