<!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. Coursera连接不上（视频无法播放），修改hosts文件

    视频问题 如果Coursera网站连接不上,或者视频加载不出来.可以通过如下方式进行配置:   一.找到hosts文件 Windows 系统, hosts文件位于: [C:\Windows\Syste ...

  2. mysqldump test

    CREATE TABLE IF NOT EXISTS `runoob_tbl`( `runoob_id` INT UNSIGNED AUTO_INCREMENT, `runoob_title` VAR ...

  3. 配置siebel捕捉SQL语句

    C:\Siebel\15.0.0.0.0\Client\BIN\siebel.exe /c c:\Siebel\15.0.0.0.0\Client\bin\chs\siebel.cfg /B &quo ...

  4. nginx源码完全注释（1）ngx_alloc.h / ngx_alloc.c

    首先看 ngx_alloc.h 文件,主要声明或宏定义了 ngx_alloc,ngx_calloc,ngx_memalign,ngx_free. /* * Copyright (C) Igor Sys ...

  5. 前向渲染路径细节 Forward Rendering Path Details

    正向渲染路径细节 Forward Rendering Path Details Forward Rendering path renders each object in one or more pa ...

  6. 微信小程序(应用号)开发教程

    本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志.下载源码 1 ...

  7. JAVA 上加密算法的实现用例,MessageDigest介绍

    第 1 章基础知识 1.1. 单钥密码体制 单钥密码体制是一种传统的加密算法,是指信息的发送方和接收方共同使用同一把密钥进行加解密. 通常 , 使用的加密算法 比较简便高效 , 密钥简短,加解密速度快 ...

  8. Oracle 用户验证日志

    1.sysdba/sysoper 权限用户验证日志;2.非sysdba/sysoper 权限用户验证日志;3.关于sqlcode; 1.sysdba/sysoper 权限用户验证日志:在数据库设置了参 ...

  9. hdu 1686 KMP算法

    题意: 求子串w在T中出现的次数. kmp算法详解:http://www.cnblogs.com/XDJjy/p/3871045.html #include <iostream> #inc ...

  10. CMDB小练习

    为什么要用CMDB? 因为公司之前统计资产信息用的是excel表格,随着业务的增加和信息的变更,这个表格变得越来越乱,所以我们就想着编写出一套自动管理资产信息的系统,实现自动管理资产信息 三种方案? ...