css3导航鼠标经过移动、缩放、转动、拉长、拉伸
<!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导航鼠标经过移动、缩放、转动、拉长、拉伸的更多相关文章
- CSS3实现鼠标移动到图片上图片变大
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...
- 我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
- 用css3实现鼠标移进去当前亮其他变灰
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 在unity中用鼠标实现在场景中拖动物体,用鼠标滚轮实现缩放
在场景中添加一个Plan,Camera,Directional Light,Cube.添加两个脚本scrollerScirpt(挂在Camera),CubeDragScript(挂在Cube上). 1 ...
- 基于css3的鼠标经过动画显示详情特效
之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览 源码下载 ...
- HTML/JavaScript实现地图以鼠标为圆心缩放和移动
代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- css3文字导航鼠标悬停气泡动画特效源码下载
效果体验:http://hovertree.com/texiao/css3/8/ 效果图: 点击这里下载:http://hovertree.com/h/bjaf/8d5vmddq.htm 更多特效:h ...
- 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法
1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...
- css3实现 鼠标经过li时动态画边框(jq库导航)
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta na ...
随机推荐
- UISprite
[UISprite] UISprite用于引用一个UIAtlas中的sprite. 此脚本最强大的功能是Sprite Type,主要指定在需拉伸图片时的行为,它有以下几种值: 1)Simple:普通拉 ...
- 111. Minimum Depth of Binary Tree (Tree; DFS)
Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...
- UNITY调用安桌方法出现 JNI: Init'd AndroidJavaClass with null ptr!
UNITY调用安桌方法出现 JNI: Init'd AndroidJavaClass with null ptr! 原因是····· 得运行在一个真正的Android设备上! 得运行在一个真正的And ...
- 项目介绍4 y有用
在青岛做了两年开发,大大小小参与过三个项目的开发,一个是某公司内部的人员管理系统,一个是物流项目,最近做的是一个电商项目. 前两个项目采用的是ssh框架搭建的,最近的项目采用的是ssm框架搭建的.在实 ...
- dedecms开启报错调试
位置:/include/common.inc.php //error_reporting(E_ALL); error_reporting(E_ALL || ~E_NOTICE); 替换成 error_ ...
- 白盒测试实践项目(day4)
华中科技大学教材订购系统 代码评审会议纪要 与会人员: 胡俊辉.杨瑞丰.汪鸿.张颖.李建文 评审标准: 此次代码评审会议,我们小组选用了阿里巴巴Java开发手册对代码进行评审. 会议过程: 1:周末下 ...
- JS中立即执行函数的理解
1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: U ...
- [GO]runtime包及gosched的使用
Gosched:让出CPU时间片 Goexit:退出当前的协程 GOMAXPROCS:设置使用最大的CPU数量(哇,牛逼了...) package main import ( "fmt&qu ...
- ubuntu-server部署php+mysql运行环境
1.apt-get install git php5 mysql-server apache2 phpmyadmin 2.sudo ln -s /usr/share/phpmyadmin /var/w ...
- Why won't JRockit find my classes
This is the second post by Mattis, diving deep into JVM specifics. NoClassDefFoundErrors are a drag. ...