在CSS中,您可以使用transition
屬性和background-image
屬性結(jié)合來實現(xiàn)hover漸變效果。以下是一個簡單的示例:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Gradient Hover Effect</title>
</head>
<body>
<div class="gradient-hover">Hover over me!</div>
</body>
</html>
CSS (styles.css):
.gradient-hover {
padding: 20px;
text-align: center;
font-size: 24px;
color: white;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a18cd1, #fbc2eb);
background-size: 400% 400%;
transition: background 0.5s ease;
}
.gradient-hover:hover {
background-position: 0% 50%;
}
在這個示例中,.gradient-hover
類設(shè)置了一個初始的漸變背景。background-size
屬性設(shè)置為400%,這意味著漸變將在兩個方向上重復(fù)四次。transition
屬性設(shè)置了背景變化的持續(xù)時間(在這里是0.5秒)和緩動類型(這里是ease
)。
當(dāng)鼠標(biāo)懸停在 .gradient-hover
元素上時,:hover
偽類將 background-position
從0% 50%調(diào)整為100% 50%,從而實現(xiàn)漸變效果。