鼠標經過顯示邊框
<html>
<head>
<style>
div {
width: 296px;
height: 180px;
margin: 100px auto;
background-color: gray;
position: relative;
}
div:hover::before { /* 鼠標經過後，前面插入一個僞元素 */
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(255, 255, 255, 0.3);
display: block; /* 僞元素屬於行內元素，需要轉換 */
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
/**
div::before { // 相當於當前元素插入一個盒子
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(255, 255, 255, 0.3);
display: block; // 僞元素屬於行內元素，需要轉換
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
}
*/
</style>
</head>
<body>
<div>
<img src="images/1.png" height="180" width="296" alt="">
</div>
</body>
</html>
trasition 過渡
trasition： 要過渡的屬性 花費時間 運動曲線 開始時間；
如果有多組過渡屬性，用逗號隔開
|
屬性 |
描述 |
| trasition | 簡寫屬性，用於一個屬性中設置4個過渡屬性 |
| trasition-property | 過渡css屬性名稱 |
| trasition-duration | 過渡花費時間。默認0 |
| trasition-timing-function | 過渡時間曲線。默認"ease" |
| trasition-delay | 過渡開始時間。默認0 |
示例：
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/*動畫放在此標籤，若是放入下面hover，恢復將不會有動畫效果*/
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
}
div:hover { /* 鼠標經過後，變化 */
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>