这篇文章主要介绍了怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
代码解读
定义dom，导航中包含一个无序列表，列表中有一个列表项：
<nav>
<ul>
<li>home</li>
</ul>
</nav>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:teal;
}
隐藏列表项前端的引导符号：
navul{
padding:0;
list-style-type:none;
}
定义按钮容器尺寸：
:root{
font-size:10px;
}
navli{
width:20rem;
height:7rem;
}
设置文字样式：
navli{
font-size:20px;
text-align:center;
line-height:7rem;
font-family:sans-serif;
text-transform:uppercase;
letter-spacing:1px;
}
用伪元素制作2个背景色块：
navli{
position:relative;
}
navli::before,
navli::after{
content:'';
position:absolute;
width:inherit;
height:inherit;
top:0;
left:0;
}
navli::before{
background-color:white;
z-index:-1;
}
navli::after{
background-color:goldenrod;
z-index:-2;
}
让后面的背景块向右下偏移，并且让前面的背景块投放阴影，增加立体效果：
navli::before{
box-shadow:0.2rem0.2rem0.5remrgba(0,0,0,0.2);
}
navli::after{
transform:translate(1.5rem,1.5rem);
}
接下来增加悬停效果。
设置缓动时间，主元素和伪元素都将有缓动效果：
navli{
transition:0.3s;
}
navli::before,
navli::after{
transition:0.3s;
}
当悬停时，2个背景色块的颜色互换：
navli:hover::before{
background-color:goldenrod;
}
navli:hover::after{
background-color:white;
}
同时，后面的背景色块的向左上方移动，按钮整体则向右下方移动：
navli:hover{
transform:translate(1.5rem,1.5rem);
}
navli:hover::after{
transform:translate(-1.5rem,-1.5rem);
}
同时，再让文本在悬停时变色：
navli:hover{
color:white;
}
再增加几个按钮：
<nav>
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
最后，增加按钮之间的间距：
navli{
margin:3rem;
}
感谢你能够认真阅读完这篇文章，希望小编分享的“怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
