导航效果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实现 实现效果 砰砰砰 实现原理 通过动画改变每个元素的高度,从而实现每个元素高度变化的效果,为了使每个元素依次跳动,给每个元素添加一定的延时效果,使得从效果元素依次跳动 代码分析 ...
随机推荐
- python sys模块
sy模块主要用于:解析器及环境 命令行参数 python xx.py xx1 xx2注:xx.py: sys.argv[0] 脚本名称 xx1 sys.argv[1] 第1个参数退出程序 sys.ex ...
- Date Picker和UITool Bar的使用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana } span.s1 { } span.s2 { background-colo ...
- 常见的js 里对数字进行处理的函数方法集合
常见的对小数值舍入为整数的几个方法:Math.ceil().Math.floor()和Math.round(). 这三个方法分别遵循下列舍入规则: Math.ceil()执行向上舍入,即它总是将数值向 ...
- 深入理解js构造函数
JavaScript对象的创建方式 在JavaScript中,创建对象的方式包括两种:对象字面量和使用new表达式.对象字面量是一种灵活方便的书写方式,例如: ? 1 2 3 4 5 6 var o1 ...
- php curl 采集
curl 采集五个步骤: 1.curl_init()初始化curl 2.curl_setopt()设置传输数据和参数 3.curl_exec()执行传输并获取返回数据 4.curl_errono()返 ...
- 【第1期】腾讯云的1001种玩法征集，Ipad mini和Kindle 等你拿!(文章评审中)
版权声明:本文由阁主的小跟班原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/695994001482226944 来源:腾云 ...
- JS控制TABLE表格在任意一行下面添加一行（有待完善）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Python之路 day2 字符编码及转换
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa import sys print("sys default encodin ...
- simpson法求积分 专题练习
[xsy1775]数值积分 题意 多组询问,求\(\int_l^r\sqrt{a(1-{x^2\over b})}dx\) 分析 double f(double x) { return sqrt(a* ...
- Centos下Yum安装PHP5.5,5.6,7.0
默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...