资讯专栏INFORMATION COLUMN

前端每日实战:135# 视频演示如何用纯 CSS 创作一个悬停时右移的按钮特效

CntChen / 3471人阅读

摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/PdaNXw

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/c3MV9Sa

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,导航中包含一个无序列表,列表项中内嵌一个 span,文字写在 span 中:

</>复制代码

    • home

居中显示:

</>复制代码

  1. body {
  2. margin: 0;
  3. height: 100vh;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. background-color: #333;
  8. }

隐藏列表项前端的引导符号:

</>复制代码

  1. nav ul {
  2. padding: 0;
  3. list-style-type: none;
  4. }

设置按钮的尺寸和颜色:

</>复制代码

  1. nav li {
  2. width: 8em;
  3. height: 2em;
  4. font-size: 25px;
  5. color: orange;
  6. }

设置文字样式,注意高度是 120%span 比它父级的 li 要高一些:

</>复制代码

  1. nav li span {
  2. position: relative;
  3. box-sizing: border-box;
  4. width: inherit;
  5. height: 120%;
  6. top: -10%;
  7. background-color: #333;
  8. border: 2px solid;
  9. font-family: sans-serif;
  10. text-transform: capitalize;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. }

span 元素稍向右移:

</>复制代码

  1. nav li span {
  2. transform: translateX(4px);
  3. }

用列表项 li 的左边框画出 1 条竖线:

</>复制代码

  1. nav li {
  2. box-sizing: border-box;
  3. border-left: 2px solid;
  4. }

用列表项的伪元素再画出 2 条竖线,它们的高度依次降低,至此,按钮左侧一共有 3 条竖线:

</>复制代码

  1. nav li {
  2. position: relative;
  3. }
  4. nav li::before,
  5. nav li::after
  6. {
  7. content: "";
  8. position: absolute;
  9. width: inherit;
  10. border-left: 2px solid;
  11. z-index: -1;
  12. }
  13. nav li::before {
  14. height: 80%;
  15. top: 10%;
  16. left: -8px;
  17. }
  18. nav li::after {
  19. height: 60%;
  20. top: 20%;
  21. left: -14px;
  22. }

将伪元素的 2 条竖线的颜色逐渐变暗,增加一点层次感:

</>复制代码

  1. nav li::before {
  2. filter: brightness(0.8);
  3. }
  4. nav li::after {
  5. filter: brightness(0.6);
  6. }

增加鼠标悬停效果,默认状态是按钮遮住 3 条竖线,当鼠标悬停时,按钮右移,露出 3 条竖线:

</>复制代码

  1. nav li:hover span {
  2. transform: translateX(4px);
  3. }
  4. nav li span {
  5. /* transform: translateX(4px); */
  6. transform: translateX(-16px);
  7. transition: 0.3s;
  8. }

因为按钮默认状态的位置是偏左的,为了抵销这个偏移量,让列表项稍向右移:

</>复制代码

  1. nav ul {
  2. transform: translateX(16px);
  3. }

在 dom 中再增加几个按钮:

</>复制代码

    • home
    • products
    • services
    • contact

设置一下按钮的间距:

</>复制代码

  1. nav li {
  2. margin-top: 0.8em;
  3. }

大功告成!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54662.html

相关文章

  • 前端每日实战135# 视频演示何用 CSS 创作一个悬停时右移的按钮特效

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbgVXz?w=400&h=302); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehop...

    Tonny 评论0 收藏0
  • 前端每日实战 2018 年 9 月份项目汇总(共 26 个项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(...

    lavnFan 评论0 收藏0
  • 前端每日实战 2018 年 9 月份项目汇总(共 26 个项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(...

    whatsns 评论0 收藏0

发表评论

0条评论

CntChen

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<