css過渡效果給哪些對象使用?
過渡的使用口訣:誰做過渡給誰加<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 過渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 變化的屬性 花費時間 運動曲線 何時開始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要寫多個屬性,利用逗號進行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多個屬性都變化,屬性寫all就可以了 */
/* transition: height .5s ease 1s; */
/* 誰做過渡,給誰加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>