css分段控件导航栏

源码

<div class="container">

  <div class="segmented-control" style="width: 100%; color: #5FBAAC">
    <input type="radio" name="sc-1-1" id="sc-1-1-1">
    <input type="radio" name="sc-1-1" id="sc-1-1-2">
    <input type="radio" name="sc-1-1" id="sc-1-1-3" checked>
    <input type="radio" name="sc-1-1" id="sc-1-1-4">
    <label for="sc-1-1-1" data-value="Lorem Ipsum">Lorem Ipsum</label>
    <label for="sc-1-1-2" data-value="Risus Purus">Risus Purus</label>
    <label for="sc-1-1-3" data-value="Pellentesque Porta">Pellentesque Porta</label>
    <label for="sc-1-1-4" data-value="Fringilla">Fringilla</label>
  </div>

  <div class="segmented-control" style="width: 100%; color: #f7ae40">
    <input type="radio" name="sc-1-2" id="sc-1-2-1">
    <input type="radio" name="sc-1-2" id="sc-1-2-2" checked>
    <input type="radio" name="sc-1-2" id="sc-1-2-3">
    <input type="radio" name="sc-1-2" id="sc-1-2-4">
    <label for="sc-1-2-1" data-value="Euismod Quam">Euismod Quam</label>
    <label for="sc-1-2-2" data-value="Vehicula Ullamcorper">Vehicula Ullamcorper</label>
    <label for="sc-1-2-3" data-value="Ornare Consectetur">Ornare Consectetur</label>
    <label for="sc-1-2-4" data-value="Inceptos">Inceptos</label>
  </div>

  <div class="segmented-control" style="width: 100%; color: #E35354">
    <input type="radio" name="sc-1-3" id="sc-1-3-1" checked>
    <input type="radio" name="sc-1-3" id="sc-1-3-2">
    <input type="radio" name="sc-1-3" id="sc-1-3-3">
    <input type="radio" name="sc-1-3" id="sc-1-3-4">
    <label for="sc-1-3-1" data-value="Lorem Ipsum">Lorem Ipsum</label>
    <label for="sc-1-3-2" data-value="Cras justo">Cras justo</label>
    <label for="sc-1-3-3" data-value="Tellus Etiam">Tellus Etiam</label>
    <label for="sc-1-3-4" data-value="Lorem Pellentesque">Lorem Pellentesque</label>
  </div>

  <div class="segmented-control" style="width: 100%; color: #8D74C0">
    <input type="radio" name="sc-1-4" id="sc-1-4-1">
    <input type="radio" name="sc-1-4" id="sc-1-4-2">
    <input type="radio" name="sc-1-4" id="sc-1-4-3">
    <input type="radio" name="sc-1-4" id="sc-1-4-4" checked>
    <label for="sc-1-4-1" data-value="Bibendum Ornare">Bibendum Ornare</label>
    <label for="sc-1-4-2" data-value="Sem">Sem</label>
    <label for="sc-1-4-3" data-value="Magna Fusce">Magna Fusce</label>
    <label for="sc-1-4-4" data-value="Etiam Dolor">Etiam Dolor</label>
  </div>

</div>

scss

@import "compass/css3";

$control-count: 4;
$transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$transition-duration: .8s;
$color-active: white;

.segmented-control {
  position: relative; 
  display: inline-block;
  border: 1px solid currentColor;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  overflow: hidden;
  margin: .8em auto;

  @include border-radius(2px);
  @include box-sizing(border-box);
  @include user-select(none);
  @include transition-duration($transition-duration);
  @include transition-timing-function($transition-timing-function);

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  > input {
    position: absolute;
    left: -10000px;
    opacity: 0;

    &[type='checkbox'] ~ label {
      @include transition-duration(0);

      &:before {
        opacity: 0;
      }
    }

    @for $i from 1 through $control-count {
      &:disabled:nth-child(#{$i}) ~ label:nth-of-type(#{$i}) {
        opacity: 0.3;
        cursor: not-allowed;
      }

      &:nth-child(#{$i}):checked {
        ~ label:nth-of-type(#{$i}) {
          &:after, &:before { 
            opacity: 1; 
          }
        }

        @for $j from $i through $control-count {
          ~ label:first-of-type:nth-last-of-type(#{$j}) {
            &:after, &:before, & ~ label:after, & ~ label:before { 
              left: percentage((($i - 1) / 10) / ($j / 10)); 
            }
          }
        }
      }
    }
  }

  > label {
    display: inline-block;
    padding: 0 .71em;
    cursor: pointer;
    float: left;
    line-height: 3em;
    font-style: inherit;
    font-weight: inherit;
    text-decoration: inherit;

    @include transition-property(none);
    @include transition-duration(inherit);
    @include transition-timing-function(inherit);

    &:before, &:after {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    &:after {
      color: $color-active;
      content: attr(data-value);
      text-align: center;
      padding: inherit;
      z-index: 10;
      font-style: inherit;
      text-decoration: inherit;
      font-weight: inherit;
      opacity: 0;

      @include transition-property(opacity, left);
      @include transition-duration(inherit);
      @include transition-timing-function(inherit);
    }

    &:after, & {
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

      @include box-sizing(border-box);
    }

    &:before {
      content: '';
      color: inherit;
      background: currentColor;

      @include transition-property(left);
      @include transition-duration(inherit);
      @include transition-timing-function(inherit);
    }

    @for $i from 1 through $control-count {
      &:first-of-type:nth-last-of-type(#{$i}) {
        &, & ~ label {
          &, &:after, &:before {
            width: percentage(1/$i);
          }
        }
      }
    }
  }

  &.italic, .italic             { font-style: italic; }
  &.bold, .bold                 { font-weight: bold; }
  &.underline, .underline       { text-decoration: underline; }
  &.line-through, .line-through { text-decoration: line-through; }
}

$color-light : #C2C8CD;
$color-dark  : #515457;

html {
  font-size: 14px;
  font-family: 'Source Sans Pro', Helvetica, arial, sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  color: $color-light;
  cursor: default;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}

html, body {
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  @include display-flex;
}

a {
  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.container {
  margin: auto;
  max-width: 700px;
  min-width: 200px;
  text-align: center;
  padding: 0 6em;
}

来自：https://codepen.io/fstgerm/pen/KKqwEb

链接: https://www.fly63.com/course/33_1595