<!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. C#窗体中将窗体按钮与键盘关联

    当击了某个按钮相当于是按了某个键盘上按键 private void btnPre_Click(object sender, EventArgs e) {     this.treeView1.Focu ...

  2. Linux实战教学笔记55：开源虚拟化KVM（三）管理虚拟网络

    六,管理虚拟网络 [x] Linux网桥基本概念 [x] qemu-kvm支持的网络 [x] 向虚拟机添加虚拟网络连接 [x] 基于NAT的虚拟网络 [x] 基于网桥的虚拟网络 [x] 用户自定义的隔 ...

  3. 104. Maximum Depth of Binary Tree (Tree; DFS)

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  4. SpringBoot29 登录逻辑、登录状态判断

    1 知识点扫盲 浏览器和服务器之间时通过session来确定连接状态的,浏览器第一次请求时服务端会自动生成一个session,并将这个sessionId传回给浏览器,浏览器将这个sessionId存放 ...

  5. android应用:TVlauncher源码分析之Androidmanifest.json

    <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="ht ...

  6. lintcode-单例

    单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于 class Mouse (不是动物的mouse哦),我们应将其设计为 ...

  7. 常用的 Python 调试工具，Python开发必读-乾颐堂

    以下是我做调试或分析时用过的工具的一个概览.如果你知道有更好的工具,请在评论中留言,可以不用很完整的介绍. 日志 没错,就是日志.再多强调在你的应用里保留足量的日志的重要性也不为过.你应当对重要的内容 ...

  8. 白盒测试实践--Day0

    白盒测试实践--Day0 累计完成任务情况: 阶段内容 参与人 开会学习作业要求,取得共识 全体 注: 1."阶段内容"划斜线表示完成. 2.采用倒序. 具体情况: 组长提前组织分 ...

  9. Visual Studio 2015 开发 ASP.NET 5 有何变化？(转)

    出处:http://www.cnblogs.com/xishuai/p/visual-studio-2015-preview-asp-net-5-change.html 本篇博文目录: ASP.NET ...

  10. tomcat 无法clean 的bug

    如果你打开类似这种的文件夹了,那恭喜你,你无法正常clean E:\e\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0 请关 ...