在 web 开发中，菜单的样式是非常重要的，它可以直接影响用户的体验。一个好的菜单必须有易于使用的交互方式，同时还要有视觉上的吸引力。有时我们需要在菜单中使用图标，而且还要实现点击后图标的变换效果。今天我们来介绍一种使用 CSS 实现这种效果。
<html>
<head>
<style>
.menu-item {
display: inline-block;
padding: 10px 20px;
text-align: center;
background-color: #fff;
color: #000;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.menu-item:hover {
background-color: #000;
color: #fff;
}
.menu-item.active {
color: #fff;
background-color: #f00;
}
.menu-icon {
width: 20px;
height: 20px;
display: inline-block;
margin-left: 10px;
transition: all 0.3s ease-in-out;
}
.menu-item.active .menu-icon {
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="menu-item active">菜单1<span class="menu-icon"></span></div>
<div class="menu-item">菜单2<span class="menu-icon"></span></div>
<div class="menu-item">菜单3<span class="menu-icon"></span></div>
</body>
</html>这个示例中，我们通过 CSS 设置了菜单项的基本样式，包括字体、颜色、背景色和鼠标悬停时的效果。在每个菜单项后面添加了一个空的 span 元素，它用来放置图标。然后我们为图标设定了宽度、高度和 display:inline-block 属性，这使得它与文字在同一行并相互独立。CSS的 transform 属性用于设置图标的旋转方向，通过添加一个类名active 来控制菜单项的状态。
这里使用的实现方式相对简单，但可以看到菜单的视觉效果已经很不错了。如果你需要根据实际需求修改菜单的样式，可以根据这个例子进行修改和扩展。相信这个小技巧能对你的工作有所帮助。
本文链接：https://my.lmcjl.com/post/19268.html
展开阅读全文
4 评论