要結合CSS和onmouseover創建動效,可以使用CSS中的transition屬性和:hover偽類來實現動畫效果。以下是一個簡單的例子:
HTML代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box" id="box">Hover Here</div>
</body>
</html>
CSS代碼:
.box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
font-size: 20px;
transition: background-color 0.3s, transform 0.3s;
}
.box:hover {
background-color: red;
transform: scale(1.2);
}
在上面的例子中,當鼠標懸停在.box元素上時,其背景顏色會在0.3秒內過渡到紅色,并且會有一個縮放動畫效果。這是通過使用transition屬性和:hover偽類來實現的。
你可以根據自己的需求來調整動畫效果,比如改變過渡時間、添加其他屬性的過渡效果等。希望以上示例對你有幫助。