css导航图片切换效果 |css书籍下载

.nav-menu {
display: flex;
justify-content: center;
align-items: center;
}
.nav-item {
position: relative;
padding: 0 10px;
}
.nav-item:hover img {
transform: scale(1.2);
}
.nav-item img {
display: block;
width: 20px;
height: 20px;
transition: all 0.3s ease;
}
.nav-item:hover::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ccc;
z-index: -1;
}
.nav-item:hover::after {
content: "";
position: absolute;
top: -8px;
left: -8px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid #ccc;
z-index: -1;
}

以上代码中，.nav-menu表示导航菜单的容器，使用flex布局。.nav-item表示每个导航项，使用相对定位，实现:hover时图片放大的效果。使用::before和::after为导航项添加圆形背景和边框，实现切换效果。使用transition属性控制过渡效果。