阅读量:0
在CSS中,您可以使用transition
属性和background-image
属性结合来实现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
类设置了一个初始的渐变背景。background-size
属性设置为400%,这意味着渐变将在两个方向上重复四次。transition
属性设置了背景变化的持续时间(在这里是0.5秒)和缓动类型(这里是ease
)。
当鼠标悬停在 .gradient-hover
元素上时,:hover
伪类将 background-position
从0% 50%调整为100% 50%,从而实现渐变效果。