前端日常实战：126#视频演示了如何使用纯CSS制作一个小球和矩形背景的按钮悬停效果。https://codepen.io/comehop??e/pen/yxbEzJ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cGanPU6源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，导航包含一个无序列表，列表中有一个列表项：居中显示：body{保证金：0；高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:lightyellow;}隐藏列表项前面的前导符号：navul{padding:0;list-style-type:none;}setting容器大小:navli{width:8em;高度：2em；font-size:25px;}设置文字样式:navli{font-size:25px;文本对齐：居中；行高：2em；字体系列：无衬线；text-transform:capitalize;}添加一个伪元素，伪元素是2个小球：navli{position:relative;}navli::before,navli::after{content:'';位置：绝对；宽度：0.6em；高度：0.6em；背景色：gainsboro；border-radius:50%;}将小球定位在左右两端：navli::before{top:calc(50%-0.6em/2);左：0；}navli::after{bottom:calc(50%-0.6em/2);right:0;}接下来设置按钮的悬停效果。当鼠标悬停在按钮上时，让球变成一个等于容器大小的矩形：navli:hover::before,navli:hover::after{width:100%;高度：100%；border-radius:0;}其中一个矩形稍微错位到右下角，颜色加深形成阴影效果：navli:hover::before{z-index:-1;top:0;}navli:hover::after{z-index:-2;底部：-0.4em；右：-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;}就大功告成了！
