经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
css实现流程导航效果(三种方法)_CSS教程_CSS
来源:jb51  时间:2019/11/13 12:03:54  对本文有异议

css实现流程导航效果,具体内容如下所示:

::tip 使用纯css线上 流程导航效果。    本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 :::  

## 方法一 利用裁剪  该方法IE下不支持

利用裁剪 clip-path: polygon(),直接画出一个三角 唯一一点需要算出大致百分比就可以画出来  

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <style>
  7. .nav-box {
  8. display: flex;
  9. list-style: none;
  10. font-size: 14px;
  11. }
  12. .nav-box li {
  13. white-space: nowrap;
  14. color: #019fe9;
  15. background: #edf9ff;
  16. counter-increment: listCounter;
  17. clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 13% 50%, 0 0);
  18. line-height: 40px;
  19. padding: 0 25px;
  20. margin-right: -10px;
  21. }
  22. .nav-box li::before {
  23. content: counter(listCounter) "-";
  24. }
  25. .nav-box .active {
  26. color: #fcfefe;
  27. background: #009fe9;
  28. }
  29. .nav-box .active ~ li {
  30. color: #8e8e8e;
  31. background: #ebedf0;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <!-- 容器 -->
  37. <ol class="nav-box">
  38. <li><a href="">规则说明</a></li>
  39. <li><a href="">参与活动</a></li>
  40. <li class="active" aria-current="true"><a href="">参与抽奖</a></li>
  41. <li><a href="">奖品发放</a></li>
  42. <li><a href="">查看结果</a></li>
  43. </ol>
  44. </body>
  45. </html>

## 方法二 利用错位

flex + transform : skewX(); 实现  ie9+ 状况下使用前缀 -ms- + 这个方法也完全利用里before after, + 原理1 --- 利用 before + after 分成上下半区 <Badge text="【这种方法有个缺陷就是要单独补全第一个的尾巴】" type="warn"/> + 原理2 --- 利用 before + after 分成左右半区 <Badge text="【该方法只对第一个before 或 after做处理避免第一个的问题】" type="success"/>

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <style scoped>
  7. .nav-box {
  8. display: flex;
  9. list-style: none;
  10. font-size: 14px;
  11. }
  12. .nav-box li {
  13. white-space: nowrap;
  14. color: #019fe9;
  15. padding: 0 15px 0 25px;
  16. line-height: 40px;
  17. margin-left: 3px;
  18. position: relative;
  19. z-index: 99;
  20. }
  21. .nav-box li:first-child{
  22. background: #edf9ff;
  23. margin-right: 7px;
  24. }
  25. .nav-box .active:first-child{
  26. background: #019fe9;
  27. }
  28. .nav-box li:first-child::before,
  29. .nav-box li:first-child::after{
  30. left: 7px;
  31. }
  32. .nav-box li::before,
  33. .nav-box li::after {
  34. content: "";
  35. position: absolute;
  36. left: 0;
  37. height: 50%;
  38. width: 100%;
  39. background: #edf9ff;
  40. z-index: -1;
  41. }
  42. .nav-box li::before {
  43. top: 0;
  44. transform: skew(30deg);
  45. }
  46. .nav-box li::after {
  47. bottom: 0;
  48. transform: skew(-30deg);
  49. }
  50. .nav-box .active {
  51. color: #d7effb;
  52. }
  53. .nav-box .active::before,
  54. .nav-box .active::after {
  55. background: #009fe9;
  56. }
  57. .active ~ li {
  58. color: #909091;
  59. }
  60. .active ~ li::before,
  61. .active ~ li::after {
  62. background: #ebedf0;
  63. }
  64. </style>
  65. </head>
  66. <body>
  67. <!-- 容器 -->
  68. <ol class="nav-box">
  69. <li class="active">1-规则说明</li>
  70. <li>2-参与活动</li>
  71. <li>3-参与抽奖</li>
  72. <li>4-奖品发放</li>
  73. <li>5-参与结果</li>
  74. </ol>
  75. </body>
  76. </html>

## 方法三 border造三角

利用 border 生成前后三角  缺点是索引需要自己定义 不加标签情况下无法使用css计数器

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <style>
  7. .nav-box{
  8. height:40px;
  9. line-height:40px;
  10. list-style: none;
  11. padding:0;
  12. display:flex;
  13. font-size:14px;
  14. overflow: hidden;
  15. }
  16. .nav-box li{
  17. padding:0 10px 0 10px;
  18. margin-right: 18px;
  19. white-space: nowrap;
  20. position:relative;
  21. color:#019fe9;
  22. background:#edf9ff ;
  23. }
  24. /* 三角 */
  25. .nav-box li:before,.nav-box li:after{
  26. content:'';
  27. position:absolute;
  28. width: 0;
  29. height: 0;
  30. }
  31. .nav-box li:before{
  32. right: -16px;
  33. border: solid transparent;
  34. border-width: 20px 0 20px 16px;
  35. border-left-color:#edf9ff;
  36. z-index:2;
  37. }
  38. /* 白线 */
  39. .nav-box li:after{
  40. top: -3px;
  41. left: -18px;
  42. border: solid #edf9ff;
  43. border-width: 23px 0 23px 18px;
  44. border-left-color: transparent;
  45. z-index: 1;
  46. }
  47. .nav-box .active{
  48. color: #fff;
  49. background:#009fe9;
  50. }
  51. .nav-box .active ~ li{
  52. color:#8e8e8e;
  53. background:#ebedf0;
  54. }
  55. .nav-box .active:before{
  56. border-left-color:#009fe9;
  57. }
  58. .nav-box .active:after{
  59. border-color: #009fe9;
  60. border-left-color: transparent;
  61. }
  62. .nav-box .active ~ li:before{
  63. border-left-color:#ebedf0;
  64. }
  65. .nav-box .active ~ li:after{
  66. border-color: #ebedf0;
  67. border-left-color: transparent;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <ol class="nav-box">
  73. <li>1-规则说明</li>
  74. <li>2-参与活动</li>
  75. <li class="active">3-参与抽奖</li>
  76. <li>4-奖品发放</li>
  77. <li>5-参与结果</li>
  78. </ol>
  79. </body>
  80. </html>

总结

以上所述是小编给大家介绍的css实现流程导航效果(三种方法),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号