css三条杠变成x

在网站设计中，有时候我们会使用三条杠来表示网站的导航栏或者菜单栏，这样看起来比较简洁美观。但是当我们把三条杠放在手机上时，它就不太适合了。因为手机屏幕太小，三条杠会占用宝贵的空间，不够明显，用户可能很难点击到。所以，我们需要把三条杠转化成一个更加明显的图标，那就是“X”，这样用户就能够轻松地扫描和点击导航按钮了。

.menu-icon {
    display: inline-block; 
    cursor: pointer;
    padding: 10px; 
    position: relative; /*不是必须，是用于组件某些动画效果*/
}

.menu-icon .bar {
    display: block; 
    background: #333;
    height: 3px;
    width: 25px;
    border-radius: 3px; 
    position: absolute; 
    transition: all 0.3s ease-out;
}

.menu-icon .bar:nth-child(2) {
    top: 50%; 
    margin-top: -1.5px; 
}

.menu-icon .bar:last-child {
    bottom: 0; 
}

.menu-icon.open .bar:first-child {
    transform: rotate(-45deg) translate(-4px, 4px); 
}

.menu-icon.open .bar:nth-child(2) {
    opacity: 0; 
}

.menu-icon.open .bar:last-child {
    transform: rotate(45deg) translate(-4px, -4px); 
} 

上面的pre标签内是实现三条杠变成“X”图标的CSS代码，可以看到，我们使用了CSS的伪类：nth-child，反转（rotate）和位移（translate）函数来对三条杠进行转换，达到醒目的效果。同时，我们也加了一些CSS动画效果，使得转换更加流畅。那么，如何将这些CSS代码应用到HTML页面呢？

我们只需要先在HTML页面中定义一个带有类名“menu-icon”的HTML元素，在CSS样式中将.menu-icon选择器与上面的CSS代码对应起来就可以了。而当用户点击这个图标时，我们会使用JavaScript来通过添加或者移除一个表示“打开”或者“关闭”的类名来切换菜单栏的状态。