怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果

这篇文章主要介绍了怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了桥西免费建站欢迎大家使用！

代码解读

定义dom，导航中包含一个无序列表，列表中有一个列表项：

居中显示：

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;

}

再增加几个按钮：

最后，增加按钮之间的间距：

navli{

margin:3rem;

}

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么使用纯CSS代码实现切换按钮时背景的悬停动画效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!