085 月

css3 Transition 效果的使用

SEO/网站推广, 前端开发DIV+CSS

今天看到一个英文的网站的链接鼠标经过状态是有一个过渡效果的，看了一下是用的transition属性，特地查了一下具体的使用

先看一下在下面元素中的鼠标效果

transition
css3

这里是a属性鼠标经过切换颜色的过渡效果

a:link,
a:active,
a:visited {
	-webkit-transition: color 0.25s ease-out;
	-moz-transition: color 0.25s ease-out;
	-o-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
	color:#690;
	outline: none;
	text-decoration:none;
}
a:hover { 
	color:#EBB73E;
}

效果：

然后就是鼠标经过div宽度变化的过渡效果

.transition_div1
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

.transition_div1:hover
{
width:300px;
}

效果：

No comments

星期二, 8 5 月, 2012 | 分类：SEO/网站推广, 前端开发DIV+CSS | RSS 2.0 | 留言/评论 | Trackback

留言