提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

css3导航鼠标经过移动、缩放、转动、拉长、拉伸

css3 移动 导航 鼠标 缩放 经过 拉伸
2023-09-14 08:58:23 时间 
<!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>

　　如图所示：

 

相关文章