adobe dreamweaver
新建html文档。
初始化css代码。
书写css代码。.options { background: rgba(255, 255, 255, 0.9); width: 200px; position: fixed; right: 30px; top: 30px; border-radius: 1px; }.options-section { border-bottom: 1px solid #f9f9f9; padding: 15px; font-size: 12px; }.options-section-title { text-transform: uppercase; font-size: 0.9em; font-weight: 800; color: #CCC; letter-spacing: 1px; margin-bottom: 10px; }.options-section > input[type='range'] { width: 100%; }.segmented-control { width: 100%; box-sizing: border-box; position: relative; background: white; border: 2px solid white; border-radius: 2px; margin: 20px 5px 10px 5px; box-shadow: 0 0 0 1px #EEE; min-width: 100px; color: #4c5457; overflow: hidden; display: inline-block; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition-duration: 700ms; -webkit-transition-duration: 700ms; transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); }.segmented-control > input[type='radio'], .segmented-control > input[type='checkbox'] { position: absolute; left: -1000px; }.segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input[type='radio']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before, .segmented-control > input[type='checkbox']:nth-child(1):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before { left: 0; }.segmented-control > input[type='radio']:nth-child(2):checked ~ label:nth-of-type(2):after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:nth-of-type(2):after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:nth-of-type(2):before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:nth-of-type(2):before { opacity: 1; }.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2):before, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(2) ~ label:before { left: 50%; }.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3):before, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(3) ~ label:before { left: 33.33%; }.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 25%; }.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5):before, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(5) ~ label:before { left: 20%; }.segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6):before, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:after, .segmented-control > input[type='radio']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before, .segmented-control > input[type='checkbox']:nth-child(2):checked ~ label:first-of-type:nth-last-of-type(6) ~ label:before { left: 16.66%; }.segmented-control > input[type='radio']:nth-child(3):checked ~ label:nth-of-type(3):after, .segmented-control > input[type='checkbox']:nth-child(3):checked ~ label:nth-of-type(3):after, .segmented-control > input[type='radio']:nth-child(3):checked ~ label:nth-of-type(3):before, .segmented-control > input[type='checkbox']:nth-child(3):checked ~ label:nth-of-type(3):before { opacity: 1; }.segmented-control > input[type='radio']:nth-child(4):checked ~ label:nth-of-type(4):after, .segmented-control > input[type='checkbox']:nth-child(4):checked ~ label:nth-of-type(4):after, .segmented-control > input[type='radio']:nth-child(4):checked ~ label:nth-of-type(4):before, .segmented-control > input[type='checkbox']:nth-child(4):checked ~ label:nth-of-type(4):before { opacity: 1; }.segmented-control > input[type='radio']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input[type='checkbox']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):after, .segmented-control > input[type='radio']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input[type='checkbox']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4):before, .segmented-control > input[type='radio']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input[type='checkbox']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > input[type='radio']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before, .segmented-control > input[type='checkbox']:nth-child(4):checked ~ label:first-of-type:nth-last-of-type(4) ~ label:before { left: 75%; }.segmented-control > input[type='radio']:disabled:nth-child(1) ~ label:nth-of-type(1), .segmented-control > input[type='checkbox']:disabled:nth-child(1) ~ label:nth-of-type(1), .segmented-control > input[type='radio']:disabled:nth-child(2) ~ label:nth-of-type(2), .segmented-control > input[type='checkbox']:disabled:nth-child(2) ~ label:nth-of-type(2), .segmented-control > input[type='radio']:disabled:nth-child(3) ~ label:nth-of-type(3), .segmented-control > input[type='checkbox']:disabled:nth-child(3) ~ label:nth-of-type(3), .segmented-control > input[type='radio']:disabled:nth-child(4) ~ label:nth-of-type(4), .segmented-control > input[type='checkbox']:disabled:nth-child(4) ~ label:nth-of-type(4){ opacity: 0.3; cursor: not-allowed; }.segmented-control > label { display: inline-block; text-align: center; padding: 10px; cursor: pointer; margin-right: -4px; vertical-align: text-bottom; transition-duration: inherit; -webkit-transition-duration: inherit; transition-timing-function: inherit; -webkit-transition-timing-function: inherit; }.segmented-control > label:after { position: absolute; left: 0; top: 0; color: #FFF; opacity: 0; padding: inherit; pointer-events: none; content: attr(data-value); text-align: center; z-index: 1000; font-style: inherit; text-decoration: inherit; font-weight: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transition-property: all; -webkit-transition-duration: inherit; -webkit-transition-timing-function: inherit; transition-property: all; transition-duration: inherit; transition-timing-function: inherit; }.segmented-control > label, .segmented-control > label:after { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; }.segmented-control > label:before { content: ''; position: absolute; left: 0; top: 0; background: #4c5457; color: #FFF; opacity: 0; height: 100%; pointer-events: none; -webkit-transition-property: left; -webkit-transition-duration: inherit; -webkit-transition-timing-function: inherit; transition-property: left; transition-duration: inherit; transition-timing-function: inherit; }.segmented-control > label:first-of-type:nth-last-of-type(4), .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label, .segmented-control > label:first-of-type:nth-last-of-type(4):after, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:after, .segmented-control > label:first-of-type:nth-last-of-type(4):before, .segmented-control > label:first-of-type:nth-last-of-type(4) ~ label:before { width: 25%; }.segmented-control--turquoise > label:before { background: #5fbaac; }
代码整体结构。
查看效果。