CSS3过度效果

百度谷歌搜狗

加关注：新浪微博腾讯微博

当前位置：首页 > HTML+CSS > CSS3 > 源码

发布时间：2013-09-17 10:34 　来源/作者：藕码网　分类：CSS3

TAG标签：

摘要：CSS3过度效果

<!DOCTYPE html>
<html>
<head>
<style> 
.animated_div
	{
	width:65px;
	height:40px;
	background:#92B901;
	color:#ffffff;
	position:absolute;
	font-weight:bold;
	font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
	padding:20px 10px 0px 10px;
	float:left;
	margin:5px;
	-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
	-webkit-border-radius:5px;
	-o-transition-property:width,height,-o-transform,background,font-size,opacity;
	-o-transition-duration:1s,1s,1s,1s,1s,1s;
	-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
	-moz-transition-duration:1s,1s,1s,1s,1s,1s;
	transition-property:width,height,transform,background,font-size,opacity;
	transition-duration:1s,1s,1s,1s,1s,1s;
	border-radius:5px;
	opacity:0.4;
	}

.animated_div:hover
	{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	opacity:1;
	background:#1ec7e6;
	width:90px;
	height:60px;
	font-size:16px;
	}
</style>
</head>
<body>

<div class="animated_div">CSS3动画</div>

</body>
</html>

素材详情
用户评论
相关文章

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
最新评论

验证码:

菜单/ Menu

热门下载/ HOT