【CSS小例】赛博朋克-按钮动画
以下是一个简化的例子，展示了如何使用CSS创建一个简单的赛博朋克风格的按钮动画效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reboot Neumorphic Button Animation</title>
<style>
.button {
/* 基础样式 */
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: #2f3238;
color: #fafafa;
text-decoration: none;
border-radius: 4px;
transition: transform 0.1s, box-shadow 0.1s; /* 动画过渡效果 */
}
.button:hover {
/* 鼠标悬停样式 */
transform: translateY(-5px); /* 悬停时向上移动 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}
</style>
</head>
<body>
<a href="#" class="button">Hover Over Me!</a>
</body>
</html>这段代码展示了一个简单的赛博朋克风格的按钮，当鼠标悬停在按钮上时，会有轻微的上移和阴影效果。这种效果在现代网页设计中常常用来增强交互体验。
评论已关闭