HTML5+CSS3小实例：鼠标悬停按钮发光
warning:
这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。
以下是一个简单的HTML和CSS代码示例，演示了当鼠标悬停在按钮上时，如何使用CSS3为按钮添加发光效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Hover Glow Button</title>
<style>
.glow-button {
background-color: #4285F4;
border-radius: 8px;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: box-shadow 0.5s ease-in-out;
}
.glow-button:hover {
box-shadow: 0 0 10px #4285F4, 0 0 20px #4285F4, 0 0 30px #4285F4, 0 0 40px #4285F4, 0 0 50px #4285F4, 0 0 60px #4285F4, 0 0 70px #4285F4, 0 0 80px #4285F4, 0 0 90px #4285F4, 0 0 100px #4285F4;
}
</style>
</head>
<body>
<button class="glow-button">Hover Over Me!</button>
</body>
</html>这段代码中，.glow-button 类定义了按钮的基本样式，而 .glow-button:hover 伪类选择器定义了鼠标悬停在按钮上时发光的效果。box-shadow 属性被用来创建一个由内到外逐渐增多的发光效果，并且通过 transition 属性为这个效果添加了平滑的过渡动画。
评论已关闭