CSS3中transition过渡属性的简单应用（代码实例）

我们在很多网站上看到一些当鼠标悬浮时，商品图片有一种放大的效果、盒子有上升、下降效果或者文字会偏移等等。这些其实都是增加用户体验的方式，那么，今天就以transition过渡属性来写一个比较通用且简单易懂的过渡效果。

先看效果图：

其实，我们给图片、文字或者盒子设置鼠标悬浮hover属性，就会有一些悬浮效果。但是，那样不用过渡属性的话，用户体验很是不好，响应过于生硬，剧烈。然而，当我们给需要设置hover属性的标签时，我们不妨加一个css3中的transition属性，设置transition过渡时间，进而使得我们的hover效果变的缓慢，不那么生硬，看起来更加舒服些。

背景图放大效果css代码如下：

#box {
				border:1px solid #fff;
				width:280px;
				height: 170px;
				margin: 50px auto 0;
				background: #999;
				cursor:pointer;
				background: url(img/baidu-bg-07.jpg) no-repeat center/cover;/*设置背景图片居中显示*/
				background-size:100% 100%;/*设置背景图片默认大小100%*/
				transition: all .8s;/*设置过渡效果  transition:all（所有的）.8s(时间) */
			}
			#box:hover {
				background-size:110% 110%;/*过渡背景图片为110%，即 图片放大效果 */
			}

其中，transition:all .8s ，all 表示hover时要设置的所有的属性；.8s 是0.8s 表示过渡时间，时间范围在0-1之间，当为小数时点前面的0可以省略。

盒子上升效果css代码如下：

#box .lit-box {
				border:2px solid #fff;
				width: 240px;
				height:68px;
				margin: 70px 0 0 18px;
				transition: all .8s;/* 设置过渡效果  transition:all（所有的）.8s(时间) */
			}
			#box .lit-box:hover {
				margin:60px auto;/* hover时，距离上部位60px,初始距离为70px，即为向上移动10px */
			}

所有html源代码，请点击：transition.index