第25章 CSS3过渡效果

最新推荐文章于 2024-10-08 18:22:49 发布

iteye_17658

最新推荐文章于 2024-10-08 18:22:49 发布

阅读量133

点赞数

分类专栏：阅-H5

阅-H5 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS3过渡效果</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div>我是HTML5</div>

</body>
</html>

style.css

@charset "utf-8";

body {
	margin: 100px;
}

div {
	width: 200px;
	height: 200px;
	border: 1px solid green;
	background-color: white;
	/*transition-property: background-color, color, margin-left;*/
	/*transition-property: all;*/
	/*transition-duration: 1s;*/
	/*transition-timing-function: ease;*/
	/*transition-timing-function: linear;*/
	/*transition-timing-function: ease-in;*/
	/*transition-timing-function: cubic-bezier(0.25, 0.65, 0.88, 0.25);*/
	/*transition-timing-function: steps(5, start);*/
	/*transition-delay: 0s, 2s, 0s;*/

	/*transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;*/
	transition: all 1s ease-in 0s;
}

div:hover {
	background-color: black;
	color: white;
	margin-left: 100px;
};