这篇文章主要介绍了怎么用纯CSS实现小球变矩形背景的按钮悬停效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
成都创新互联是专业的富拉尔基网站建设公司，富拉尔基接单;提供网站制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行富拉尔基网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
代码解读
定义dom，导航中包含一个无序列表，列表中有一个列表项：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:lightyellow;
}
隐藏列表项前端的引导符号：
navul{
padding:0;
list-style-type:none;
}
设置容器尺寸：
navli{
width:8em;
height:2em;
font-size:25px;
}
设置文字样式：
navli{
font-size:25px;
text-align:center;
line-height:2em;
font-family:sans-serif;
text-transform:capitalize;
}
添加伪元素，伪元素是2个小球：
navli{
position:relative;
}
navli::before,
navli::after{
content:'';
position:absolute;
width:0.6em;
height:0.6em;
background-color:gainsboro;
border-radius:50%;
}
把小球定位在左右两端：
navli::before{
top:calc(50%-0.6em/2);
left:0;
}
navli::after{
bottom:calc(50%-0.6em/2);
right:0;
}
接下来设置按钮悬停效果。
当鼠标悬停在按钮上时，让小球变为与容器大小相等的矩形：
navli:hover::before,
navli:hover::after{
width:100%;
height:100%;
border-radius:0;
}
第其中一个矩形稍向右下角错位，并且加深它的颜色，形成阴影效果：
navli:hover::before{
z-index:-1;
top:0;
}
navli:hover::after{
z-index:-2;
bottom:-0.4em;
right:-0.4em;
filter:brightness(0.8);
}
设置悬停的颜色，伪元素的矩形背景变为蓝色，文字变为白色：
navli:hover{
color:white;
}
navli:hover::before,
navli:hover::after{
background-color:dodgerblue;
}
设置缓动时间，其中伪元素的缓动时间函数用拟人的动画效果：
navli{
transition:0.5s;
}
navli::before,
navli::after{
transition:0.5scubic-bezier(0.5,-0.5,0.25,1.5);
}
再增加几个按钮：
最后，增加按钮之间的间距：
navli{
margin:0.8em;
}.jpg)
.jpg)
感谢你能够认真阅读完这篇文章，希望小编分享的“怎么用纯CSS实现小球变矩形背景的按钮悬停效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
