css3动画-ease先快后慢

最新推荐文章于 2024-04-13 21:16:23 发布

elegancy_

最新推荐文章于 2024-04-13 21:16:23 发布

阅读量1.5w

点赞数 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.trans_box {
    padding: 20px;
	background-color: #f0f3f9;
	*zoom:1;
}
.trans_list {
	width: 10%;
	height: 64px;
	margin:10px 0;
	background-color:#486AAA;
	color:#fff;
	text-align:center;
}
.ease {
	-webkit-transition: all 4s ease;
	-moz-transition: all 4s ease;
	-o-transition: all 4s ease;
	transition: all 4s ease;
}
.ease_in {
	-webkit-transition: all 4s ease-in;
	-moz-transition: all 4s ease-in;
	-o-transition: all 4s ease-in;
	transition: all 4s ease-in;
}
.ease_out {
	-webkit-transition: all 4s ease-out;
	-moz-transition: all 4s ease-out;
	-o-transition: all 4s ease-out;
	transition: all 4s ease-out;
}
.ease_in_out {
	-webkit-transition: all 4s ease-in-out;
	-moz-transition: all 4s ease-in-out;
	-o-transition: all 4s ease-in-out;
	transition: all 4s ease-in-out;
}
.linear {
	-webkit-transition: all 4s linear;
	-moz-transition: all 4s linear;
	-o-transition: all 4s linear;
	transition: all 4s linear;
}
.trans_box:hover .trans_list, .trans_box_hover .trans_list {
	margin-left:89%;
	background-color:#beceeb;
	color:#333;
	-webkit-border-radius:25px;
	-moz-border-radius:25px;
	-o-border-radius:25px;
	border-radius:25px;		
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);				
}
</style>
</head>

<body>
<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>
    <div class="trans_list linear">linear</div>
</div>
</body>
</html>

elegancy_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css3动画-ease先快后慢

无标题文档.trans_box { padding: 20px; background-color: #f0f3f9; *zoom:1;}.trans_list { width: 10%; height: 64px; margin:10px 0; background-color:#486AAA; color:#fff; text-align:center;}.
复制链接

扫一扫