效果预览全屏预览。https://codepen.io/comehop??e/pen/yRyOZr互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cmWMQtz源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器为无序列表，列表项代表按钮：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(deepskyblue,navy);}去掉列表项前面的符号：ul{padding:0;list-style-type:none;}设置按钮的文字样式：ulli{color:#ddd;字体大小：25px；字体系列：无衬线；text-transform:uppercase;}用伪元素在按钮左边添加一个框：ulli{position:relative;}ulli::before{content:'';位置：绝对；宽度：100%；高度：100%；背景：番茄；left:-100%;}用伪元素在按钮右侧添加下划线：ulli::after{content:'';位置：绝对；宽度：100%；高度：0.2em；背景：番茄；底部：0；left:100%;}接下来设置鼠标悬停效果。当鼠标悬停时，左边的框移动到文字的位置：ulli::before{transition:0.4sease-out;}ulli:hover::before{left:100%;}上的下划线右边移动到文字的位置，它的动画时间会延迟到盒子的动画即将结束：ulli::after{transition:0.3s0.3sease-out;}ulli:hover::after{左：0%；}同时增加文字亮度：ulli{transition:0.3s;cursor:pointer;}ulli:hover{color:#fff;}隐藏按钮外的部分，使方块和下划线在默认状态下不可见，只有鼠标悬停时才会从两侧进入：ulli{overflow:hidden;}最后，在dom中再添加几个按钮：
- home
- products
- services
- contact
布局多个按钮：ul{display:flex;弹性方向：列；align-items:center;}ulli{margin:0.5em;}大功告成！
