<!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. Sqoop 1.99.6 安装和使用

        安装   1.安装准备工作:   下载的sqoop安装包 http://mirrors.hust.edu.cn/apache/sqoop/1.99.6/sqoop-1.99.6.tar.gz ...

  2. Unity牛逼的2D纹理功能

    [Unity牛逼的2D纹理功能] 1.可直接将贴图生成成为Cubemap. 2.自动生成Mipmap. 3.查看纹理被当前场景哪些对象引用.在Project窗口中,右击图像,选择 参考:file:// ...

  3. 【LA2531 训练指南】足球联赛 【最大流】

    题意: 有n支队伍进行比赛,每支队伍需要打的比赛数目相同.每场比赛恰好一支队伍胜,另一支败.给出每支队伍目前胜的场数和败的场数,以及每两支队伍还剩下的比赛场数,确定所有可能的冠军的球队.(获胜场数最多 ...

  4. Unity代码里的Position和界面上的Position

    代码里的Position = 世界坐标 this.gameObject.transform.position 界面上的Position = localPosition

  5. ARGB_8888

    原文出处:http://www.cnblogs.com/and_he/archive/2012/12/22/argb.html A:透明度 R:红色 G:绿 B:蓝 Bitmap.Config ARG ...

  6. Boost智能指针使用总结

    内存管理是一个比较繁琐的问题,C++中有两个实现方案: 垃圾回收机制和智能指针.垃圾回收机制因为性能等原因不被C++的大佬们推崇, 而智能指针被认为是解决C++内存问题的最优方案. 1. 智能指针定义 ...

  7. mysql 事物ACID和隔离级别

    ⑴ 原子性(Atomicity) 原子性是指事务包含的所有操作要么全部成功,要么全部失败回滚,这和前面两篇博客介绍事务的功能是一样的概念,因此事务的操作如果成功就必须要完全应用到数据库,如果操作失败则 ...

  8. 安装DotNetCore.1.0.0-VS2015Tools.Preview2一直失败

    266C:22B0][2016-08-01T23:02:29]i052: Condition 'WixBundleInstalled OR NOT(NetFx45Release < 378675 ...

  9. （转） c/c++调用libcurl库发送http请求的两种基本用法

    libcurl主要提供了两种发送http请求的方式,分别是Easy interface方式和multi interface方式,前者是采用阻塞的方式发送单条数据,后者采用组合的方式可以一次性发送多条数 ...

  10. 编写高质量代码改善C#程序的157个建议——建议106：为静态类添加静态构造函数

    建议106:为静态类添加静态构造函数 静态类可以拥有构造方法,这就是静态构造方法.静态构造方法与实例构造方法比较有几个自己的特点: 只被执行一次,且在第一次调用类成员之前被运行时执行. 代码无法调用它 ...