<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS3动画的属性主要分为三类：transform、transition以及animation。</title>

	<style type="text/css">

		*{margin:0; padding:0;}

		.nav{ width: 200px; font-family: 'Microsoft Yahei'; margin: 50px auto;

		/*设置3D*/

		transform-style: preserve-3d;

		/*为元素设置三维透视距离*/

		perspective:400px;

		   }

		.nav li{ height: 30px; line-height: 30px; margin:1px;text-align: center; list-style: none; overflow: hidden; background: #F89928;}

		.nav li a{ display: block; color: #fff; font-size: 16px; text-decoration: none }

		.nav li:hover{

			/*移动、缩放、转动、拉长、拉伸*/

			/*这个元素沿着Z轴移动30px，沿着X/Y轴放大1.1倍；*/

			transform: translateZ(30px) scale(1.1);

		}

	</style>

</head>

<body>

<nav class="nav">

	<ul>

		<li><a href="#">html5</a></li>

		<li><a href="#">css3</a></li>

		<li><a href="#">jquery</a></li>

		<li><a href="#">javascript</a></li>

	</ul>

</nav>

</body>

</html>

　　如图所示：

css3导航鼠标经过移动、缩放、转动、拉长、拉伸的更多相关文章

  1. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  2. 我收集到的最好的jQuery和CSS3导航菜单

    jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...

  3. 用css3实现鼠标移进去当前亮其他变灰

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 在unity中用鼠标实现在场景中拖动物体，用鼠标滚轮实现缩放

    在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1 ...

  5. 基于css3的鼠标经过动画显示详情特效

    之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览   源码下载 ...

  6. HTML/JavaScript实现地图以鼠标为圆心缩放和移动

    代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. css3文字导航鼠标悬停气泡动画特效源码下载

    效果体验:http://hovertree.com/texiao/css3/8/ 效果图: 点击这里下载:http://hovertree.com/h/bjaf/8d5vmddq.htm 更多特效:h ...

  8. 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

    1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...

  9. css3实现 鼠标经过li时动态画边框(jq库导航)

    <!doctype html> <html> <head> <meta charset="utf-8" /> <meta na ...

随机推荐

  1. NormalMapping

    [NormalMapping] 法线贴图内的数据是法线,高度贴图内的数据是高度,不是一个东西.在ShaderLab中,UnpackNormal()分析的是法线贴图(注意不是高度贴图). 可以看到,在G ...

  2. default of c#

    [default of c#] 在泛型类和泛型方法中产生的一个问题是,在预先未知以下情况时,如何将默认值分配给参数化类型 T: T 是引用类型还是值类型. 如果 T 为值类型,则它是数值还是结构. 给 ...

  3. [bzoj2212]Tree Rotations(线段树合并)

    解题关键:线段树合并模板题.线段树合并的题目一般都是权值线段树,因为结构相同,求逆序对时,遍历权值线段树的过程就是遍历所有mid的过程,所有能求出所有逆序对. #include<iostream ...

  4. MYSQL 测试常用语句使用技巧

     终于有时间可以整理一下工作中常用的sql语句,基本的sql语句及增删改查就不说了.对于测试而言,经常用到的还是造数据,取随机数据和查询.比如造数据时,为了确保数据真实性,可能时间是随机的,用户是随机 ...

  5. 基于mapper插件编写的可定制代码生成基本框架（springboot）

    先看一下,基本结构图: 特征,提供 最佳实践的项目结构.配置文件.精简的POM 统一响应结果封装 统一异常处理 统一接口登录认证 常用基础方法抽象封装 Controller.service.dao层基 ...

  6. 关于fastjson的一些知识

    今天被问到了一些有关fastjson的知识,问了fastjson内部的实现机制,笔者只是用过fastjson这个包,还真没了解过它的机制等. 下去后搜索了一些有关fastjson的知识,希望能对自己和 ...

  7. 智能合约调用另一合约中的payable方法

    参考链接: https://ethereum.stackexchange.com/questions/9705/how-can-you-call-a-payable-function-in-anoth ...

  8. C++编程语言学习资料

    C++ How to Program, 7/e (C++大学教程 第7版) 英文原版 全彩页 C++大学教程(第五版)中文版高清PDF下载 C++大学教程 第五版 (C++ How to Progra ...

  9. Mysql建表的时候创建索引

    创建表时可以直接创建索引,这种方式最简单.方便.其基本形式如下: CREATE TABLE 表名( 属性名 数据类型[完整性约束条件], 属性名 数据类型[完整性约束条件], ...... 属性名 数 ...

  10. toolbox类

    新建Qt  应用,项目名称为“c”,基类选择“QWidget”,取消“创建界面”复选框的选中状态. 添加该工程的提供主要显示界面的函数所在的文件,在“c”项目名上单击鼠标右键,在弹出的快捷菜单中选择“ ...