效果：
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS3过渡效果</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>我是HTML5文本</div>
</body>
</html>@charset "utf-8";
body{
margin:100px;
}
div{
width: 200px;
height: 200px;
border: 2px 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.85,0.25);
transition-timing-function: steps(1,start);*/
/*transition-delay: 0s,2s,0s;*/
/*常用简写版本*/
/*transition:background-color 1s ease 0s,color 1s ease 0s margin-left 1s ease 0s;*/
transition: all 2s;
}
div:hover{
background-color: black;
color: white;
margin-left: 100px;
}通过hover触发(鼠标触发)
ppt:
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
