<!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. ASP.NET Web API(C#)学习01

    Web Api 记得去年公司有个分享会分享了这个,最近留意招聘信息的时候,发现有个招聘信息的要求是会用WebApi,然后花了半个小时不到,根据下面这篇文章了解了一下,觉得这个东西也不难啊. 突然发现在 ...

  2. DAVINCI开发原理

    本文中约定: [host] 表示主机PC机Linux [target] 表示目标板Linux DAVINCI开发原理之一----ARM端开发环境的建立(DVEVM) 1. 对DAVINCI平台,TI在 ...

  3. CCS5连接调试C64X系列DSP核

    CCS从3.3改版为5.X之后,CCS 变化很大.DaVinci芯片中DSP的调试步骤也不同了.这里介绍下在CCS里如何调试DaVinci的DSP核心 1. 创建CCS V5版本的project 本人 ...

  4. 中文分词工具jieba中的词性类型

    jieba为自然语言语言中常用工具包,jieba具有对分词的词性进行标注的功能,词性类别如下: Ag 形语素 形容词性语素.形容词代码为 a,语素代码g前面置以A. a 形容词 取英语形容词 adje ...

  5. Python3 模块与包

    一.模块介绍 什么是模块? 常见的场景:一个模块就是一个包含了一组功能的Python文件,比如spam.py,模块名为spam,可以通过import spam使用. 在Python中,模块的使用方式都 ...

  6. windows下怎么安装protobuf for python

    首先从google上下载protobuf-3.0.0.zip和protoc-3.0.0-win32.zip,然后把protoc-3.0.0-win32.zip里的protoc.exe放到protobu ...

  7. [Training Video - 4] [Groovy] Initializing log inside class with constructor

    TestService s = new TestService(log,context,testRunner) s.xyz() class TestService{ def log def conte ...

  8. [Jenkins] 执行SoapUI的task，里面包含多个Project，发出的报告也要求包含多个Project，设置邮件内容为HTML+CSS

    执行SoapUI的task,里面包含多个Project,发出的报告也要求包含多个Project,设置邮件内容为HTML+CSS 如何保证样式在邮件内容中不丢失 <link title=" ...

  9. 迁移ORACLE数据库文件到ASM

    迁移数据文件到ASM 数据库一致性情况下迁移:将数据库启动到mount状态,生成rman copy 语句,然后在rman中执行: SQL> startup mount SQL> selec ...

  10. 实践作业4---DAY2阶段一。

    由于CSDN博客没有班级博客栏目,所以在该项功能上无法与博客园进行对比,我们将就CSDN和博客园的博文发布功能进行对比.我们就CSDN和博客园的博文发布页面.后台管理界面.发布新博客及界面进行了全面的 ...