transition(过渡效果)的用法

transition是CSS3新增的一个过渡效果样式,是用来监控元素的属性变化的。

transition的4个基本属性:

  • 1. transition-property: x; x为设置监控元素的某个属性(把x改为all可以监控元素所有属性)。
  • 2. transition-duration: 多少秒; 设置过渡所花费的时间。
  • 3. transition-delay: 多少秒; 设置延迟的时间。
  • 4.transition-timing-function: 运动方式; 设置过渡的运动方式(曲线),其中ease(默认值,逐渐变慢),linear(匀速),ease-in(加速),ease-out(减速),ease-in-out(先加速再减速)。

也可以将4个基本属性合起来简写为:transition:all 2s 3s ease-in;(后面两参数是可选的,多组值时用逗号隔开)。

具体例子看下面:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
	
<style>
	div{
		width:300px;
		height:100px;
		border:1px solid #f00;
		margin:20px auto;
		text-align: center;
		line-height:100px;
		/*以下为当鼠标悬停时,监控div的背景,用3秒钟过渡完成*/
		transition: background 3s;
	}
	div:hover{
		background:#ff0;
	}
	a{
		/*以下为当鼠标悬停时,监控a的所有属性,用1秒钟过渡完成*/
		transition:all 1s 0.5s linear;
	}
	a:hover{
		margin-left:10px;
		font-size:30px;
	}
</style>
	
</head>

<body>
	
	<div>
		<a href="http://www.heartmv.com">heartmv.com</a>
	</div>
	
</body>
</html>

相对于单独使用hover来说,结合transition能使元素属性变化变得平滑流畅,带来更好的视觉冲击。

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:
顶部