摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器是一个无序列表,列表项代表按钮居中显示去掉列表项前面的符号设置按钮的文字样式用伪元素在按钮的左侧增加一个方块用伪元素在按钮的右侧增加一条下划线接下来设置鼠标悬停效果。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/yRyOZr
可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cmWMQtz
源代码下载每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom,容器是一个无序列表,列表项代表按钮:
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(deepskyblue, navy); }
去掉列表项前面的符号:
ul { padding: 0; list-style-type: none; }
设置按钮的文字样式:
ul li { color: #ffffd; font-size: 25px; font-family: sans-serif; text-transform: uppercase; }
用伪元素在按钮的左侧增加一个方块:
ul li { position: relative; } ul li::before { content: ""; position: absolute; width: 100%; height: 100%; background: tomato; left: -100%; }
用伪元素在按钮的右侧增加一条下划线:
ul li::after { content: ""; position: absolute; width: 100%; height: 0.2em; background: tomato; bottom: 0; left: 100%; }
接下来设置鼠标悬停效果。
当鼠标悬停时,左侧的方块移到文字所在位置:
ul li::before { transition: 0.4s ease-out; } ul li:hover::before { left: 100%; }
右侧的下划线移到文字所在位置,它的动画时间延迟到方块的动画快结束时再开始:
ul li::after { transition: 0.3s 0.3s ease-out; } ul li:hover::after { left: 0%; }
同时,提高文字的亮度:
ul li { transition: 0.3s; cursor: pointer; } ul li:hover { color: #fff; }
隐藏掉按钮外的部分,使方块和下划线在默认状态下都不可见,只有鼠标悬停时它们才从两侧入场:
ul li { overflow: hidden; }
最后,在 dom 中再增加几个按钮:
布局多个按钮:
ul { display: flex; flex-direction: column; align-items: center; } ul li { margin: 0.5em; }
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53006.html
摘要:源代码下载每日前端实战系列的全部源代码请从下载代码解读定义,容器是一个无序列表,列表项代表按钮居中显示去掉列表项前面的符号设置按钮的文字样式用伪元素在按钮的左侧增加一个方块用伪元素在按钮的右侧增加一条下划线接下来设置鼠标悬停效果。 showImg(https://segmentfault.com/img/bVbhEuH?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(...
摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(...
阅读 2402·2021-11-15 11:36
阅读 1135·2019-08-30 15:56
阅读 2197·2019-08-30 15:53
阅读 960·2019-08-30 15:44
阅读 620·2019-08-30 14:13
阅读 965·2019-08-30 10:58
阅读 428·2019-08-29 15:35
阅读 1261·2019-08-29 13:58