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





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值