css实现13款不同的checkbox开关美化效果代码
代码语言：html
所属分类：表单美化
代码描述：css实现13款不同的checkbox开关美化效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body {
background: #fff;
margin: 0
}
.header {
margin-top: 60px;
margin-bottom: 10px;
flex-direction: "row";
display: flex;
align-items: flex-end;
justify-content: center;
font-size: 80px
}
.header .text,.header .toggle {
font-family: Open Sans;
font-weight: lighter
}
.header .toggle {
border-radius: .7em;
background: linear-gradient(45deg,#008f68,#fae042);
width: 1.9em;
height: .8em;
display: flex;
flex-direction: row;
margin-bottom: .2em
}
.header .toggle .circle {
position: relative;
left: .1em;
top: .1em;
width: .6em;
height: .6em;
border-radius: 1em;
overflow: hidden;
background: #fff;
color: #fff
}
.header .toggle .re {
color: #fff;
line-height: .6;
margin-left: .15em
}
.links {
color: #aaa;
margin: 1em auto;
text-align: center
}
.links a {
color: #888
}
.links a:hover {
color: #008f68
}
.root {
margin: 4em auto;
width: 65%;
padding: 0 1em;
border-radius: 1em;
background: #f5f5f5;
box-shadow: 0 20px 68px rgba(0,0,0,.55);
font-size: 13px
}
@media screen and (max-width: 2300px) {
.root {
width:65%
}
}
@media screen and (max-width: 1700px) {
.root {
width:85%
}
}
@media screen and (max-width: 800px) {
.root {
width:100%
}
}
.row-wrapper {
width: 100%;
border-bottom: 2px solid #ddd
}
.row-wrapper:last-child {
border-bottom: 0
}
.row-wrapper .row {
flex: 1 1 100%;
height: 15rem;
overflow: hidden
}
.row-wrapper .row,.row-wrapper .row .col {
display: flex;
align-items: center;
justify-content: space-evenly
}
.row-wrapper .row .col {
flex-direction: column;
height: 100%
}
.row-wrapper .row .col .info-class {
font-family: Lucida Console,Monaco,monospace;
letter-spacing: .5px;
text-align: center;
line-height: 1.5;
background: #ddd;
padding: 5px;
border-radius: 5px
}
.row-wrapper .name {
font: 500 14px Rubik,sans-serif;
letter-spacing: .5px;
text-transform: uppercase;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
text-align: right;
padding: 0 10px 10px
}
charset "UTF-8";.mt-android,.mt-android-indigo,.mt-android-orange,.mt-android-pink,.mt-android-violet {
display: inline-block;
box-sizing: border-box
}
.mt-android-indigo label,.mt-android-orange label,.mt-android-pink label,.mt-android-violet label,.mt-android label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 4em;
height: 1.75em;
border-radius: .875em;
background-image: linear-gradient(90deg,#848484 0,#848484 50%,#7cbcbf 0,#7cbcbf);
background-size: 8em 1.7em;
transition: all .3s ease
}
.mt-android-indigo label:before,.mt-android-orange label:before,.mt-android-pink label:before,.mt-android-violet label:before,.mt-android label:before {
content: "";
display: block;
position: absolute;
width: 2.25em;
height: 2.25em;
top: -.25em;
left: 0;
border-radius: 2em;
background: #fff;
transition: .3s ease;
box-shadow: 0 .125em .375em rgba(0,0,0,.5)
}
.mt-android-indigo input,.mt-android-orange input,.mt-android-pink input,.mt-android-violet input,.mt-android input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-android-indigo input:focus,.mt-android-orange input:focus,.mt-android-pink input:focus,.mt-android-violet input:focus,.mt-android input:focus {
outline: 0
}
.mt-android-indigo input:checked+label,.mt-android-orange input:checked+label,.mt-android-pink input:checked+label,.mt-android-violet input:checked+label,.mt-android input:checked+label {
background-position: -100%
}
.mt-android-indigo input:checked+label:before,.mt-android-orange input:checked+label:before,.mt-android-pink input:checked+label:before,.mt-android-violet input:checked+label:before,.mt-android input:checked+label:before {
transform: translateX(1.75em)
}
.mt-android-indigo input:disabled+label,.mt-android-orange input:disabled+label,.mt-android-pink input:disabled+label,.mt-android-violet input:disabled+label,.mt-android input:disabled+label {
background: #ccc!important;
cursor: not-allowed!important
}
.mt-android-indigo input:disabled+label:before,.mt-android-orange input:disabled+label:before,.mt-android-pink input:disabled+label:before,.mt-android-violet input:disabled+label:before,.mt-android input:disabled+label:before {
background: #ccc!important;
box-shadow: 0 .125em .375em rgba(0,0,0,.5)!important
}
.mt-android-indigo label {
background-image: linear-gradient(90deg,#848484 0,#848484 50%,#9fa8da 0,#9fa8da)
}
.mt-android-violet label {
background-image: linear-gradient(90deg,#848484 0,#848484 50%,#ce93d8 0,#ce93d8)
}
.mt-android-pink label {
background-image: linear-gradient(90deg,#848484 0,#848484 50%,#f48fb1 0,#f48fb1)
}
.mt-android-orange label {
background-image: linear-gradient(90deg,#848484 0,#848484 50%,#ffcc80 0,#ffcc80)
}
.mt-check,.mt-check-fruit,.mt-check-garden,.mt-check-matte,.mt-check-pink {
display: inline-block;
box-sizing: border-box
}
.mt-check-fruit label,.mt-check-garden label,.mt-check-matte label,.mt-check-pink label,.mt-check label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 7em;
height: 3em;
border-radius: 1.5em;
background: #2e394d;
border: 0;
transition: all .3s ease
}
.mt-check-fruit label:before,.mt-check-garden label:before,.mt-check-matte label:before,.mt-check-pink label:before,.mt-check label:before {
content: "";
display: block;
position: absolute;
width: 2.4em;
height: 2.4em;
top: .3em;
left: .3em;
border-radius: 2.5em;
background: #f0134d;
transition: .3s ease
}
.mt-check-fruit input,.mt-check-garden input,.mt-check-matte input,.mt-check-pink input,.mt-check input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-check-fruit input:focus,.mt-check-garden input:focus,.mt-check-matte input:focus,.mt-check-pink input:focus,.mt-check input:focus {
outline: 0
}
.mt-check-fruit input:after,.mt-check-fruit input:before,.mt-check-garden input:after,.mt-check-garden input:before,.mt-check-matte input:after,.mt-check-matte input:before,.mt-check-pink input:after,.mt-check-pink input:before,.mt-check input:after,.mt-check input:before {
content: "";
display: block;
position: absolute;
height: .25em;
border-radius: .125em;
background: #fff;
transition: .3s ease
}
.mt-check-fruit input:before,.mt-check-garden input:before,.mt-check-matte input:before,.mt-check-pink input:before,.mt-check input:before {
width: 1.6875em;
transform: rotate(-45deg) translate(-.525em,1.425em)
}
.mt-check-fruit input:after,.mt-check-garden input:after,.mt-check-matte input:after,.mt-check-pink input:after,.mt-check input:after {
width: 1.6875em;
transform: rotate(45deg) translate(1.425em,.525em)
}
.mt-check-fruit input:checked:before,.mt-check-garden input:checked:before,.mt-check-matte input:checked:before,.mt-check-pink input:checked:before,.mt-check input:checked:before {
width: 1.5625em;
transform: rotate(-45deg) translate(2.5375em,4.55em)
}
.mt-check-fruit input:checked:after,.mt-check-garden input:checked:after,.mt-check-matte input:checked:after,.mt-check-pink input:checked:after,.mt-check input:checked:after {
width: .73em;
transform: rotate(45deg) translate(4.55em,-2.1625em)
}
.mt-check-fruit input:checked+label:before,.mt-check-garden input:checked+label:before,.mt-check-matte input:checked+label:before,.mt-check-pink input:checked+label:before,.mt-check input:checked+label:before {
background: #40bfc1;
transform: translateX(4em)
}
.mt-check-fruit input:disabled:after,.mt-check-fruit input:disabled:before,.mt-check-garden input:disabled:after,.mt-check-garden input:disabled:before,.mt-check-matte input:disabled:after,.mt-check-matte input:disabled:before,.mt-check-pink input:disabled:after,.mt-check-pink input:disabled:before,.mt-check input:disabled:after,.mt-check input:disabled:before {
cursor: not-allowed!important
}
.mt-check-fruit input:disabled+label,.mt-check-garden input:disabled+label,.mt-check-matte input:disabled+label,.mt-check-pink input:disabled+label,.mt-check input:disabled+label {
background: #ccc!important;
cursor: not-allowed!important
}
.mt-check-fruit input:disabled+label:before,.mt-check-garden input:disabled+label:before,.mt-check-matte input:disabled+label:before,.mt-check-pink input:disabled+label:before,.mt-check input:disabled+label:before {
background: #ddd!important
}
.mt-check-garden label:before {
background: #ff2e63
}
.mt-check-garden input:checked+label:before {
background: #21bf73
}
.mt-check-pink label:before {
background: #ffe3ed
}
.mt-check-pink input:after,.mt-check-pink input:before {
background: #2e394d
}
.mt-check-pink input:checked+label:before {
background: #beebe9
}
.mt-check-matte label:before {
background: #c9485b
}
.mt-check-matte input:checked+label:before {
background: #75b79e
}
.mt-check-fruit label:before {
background: #ff8364
}
.mt-check-fruit input:checked+label:before {
background: #5f6caf
}
.mt-emoji,.mt-emoji-gender,.mt-emoji-like,.mt-emoji-mood,.mt-emoji-mute,.mt-emoji-pet {
display: inline-block;
box-sizing: border-box
}
.mt-emoji-gender label,.mt-emoji-like label,.mt-emoji-mood label,.mt-emoji-mute label,.mt-emoji-pet label,.mt-emoji label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 7em;
height: .8em;
border-radius: 1em;
background: #fff;
border: .2em solid #888;
transition: all .3s ease
}
.mt-emoji-gender label:before,.mt-emoji-like label:before,.mt-emoji-mood label:before,.mt-emoji-mute label:before,.mt-emoji-pet label:before,.mt-emoji label:before {
content: "";
display: block;
position: absolute;
font-size: 3em;
transition: .3s ease;
left: 0;
top: -.6em
}
.mt-emoji-gender input,.mt-emoji-like input,.mt-emoji-mood input,.mt-emoji-mute input,.mt-emoji-pet input,.mt-emoji input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-emoji-gender input:focus,.mt-emoji-like input:focus,.mt-emoji-mood input:focus,.mt-emoji-mute input:focus,.mt-emoji-pet input:focus,.mt-emoji input:focus {
outline: 0
}
.mt-emoji-gender input:checked+label:before,.mt-emoji-like input:checked+label:before,.mt-emoji-mood input:checked+label:before,.mt-emoji-mute input:checked+label:before,.mt-emoji-pet input:checked+label:before,.mt-emoji input:checked+label:before {
transform: translateX(.8em)
}
.mt-emoji-gender input:disabled+label,.mt-emoji-like input:disabled+label,.mt-emoji-mood input:disabled+label,.mt-emoji-mute input:disabled+label,.mt-emoji-pet input:disabled+label,.mt-emoji input:disabled+label {
cursor: not-allowed!important
}
.mt-emoji-mood label:before {
content: "😄"
}
.mt-emoji-mood input:checked+label:before {
content: "😠"
}
.mt-emoji-gender label:before {
content: "👨"
}
.mt-emoji-gender input:checked+label:before {
content: "👩"
}
.mt-emoji-pet label:before {
content: "🐶"
}
.mt-emoji-pet input:checked+label:before {
content: "🐱"
}
.mt-emoji-mute label:before {
content: "🔇"
}
.mt-emoji-mute input:checked+label:before {
content: "🔊"
}
.mt-emoji-like label:before {
content: "👍"
}
.mt-emoji-like input:checked+label:before {
content: "👎"
}
.mt-star,.mt-star-garden,.mt-star-golden,.mt-star-pink,.mt-star-tomato {
display: inline-block;
box-sizing: border-box
}
.mt-star-garden label,.mt-star-golden label,.mt-star-pink label,.mt-star-tomato label,.mt-star label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 5em;
height: 5em;
transition: all .3s ease;
overflow: hidden;
clip-path: polygon(88.42% 39.625%,62.765% 36.275%,51.645% 12.85%,51.58018% 12.7258%,48.355% 12.85%,37.235% 36.275%,11.58% 39.625%,10.40617% 40.27148%,10.565% 42.7%,29.365% 60.54%,24.62% 86.05%,25.83849% 88.08153%,27.285% 87.945%,50% 75.545%,72.715% 87.94%,75.40571% 86.24281%,75.38% 86.045%,70.635% 60.53%,89.435% 42.69%,88.42% 39.625%,67.405% 58.615%,66.89479% 59.48382%,66.88% 60.235%);
-webkit-clip-path: polygon(88.42% 39.625%,62.765% 36.275%,51.645% 12.85%,51.58018% 12.7258%,48.355% 12.85%,37.235% 36.275%,11.58% 39.625%,10.40617% 40.27148%,10.565% 42.7%,29.365% 60.54%,24.62% 86.05%,25.83849% 88.08153%,27.285% 87.945%,50% 75.545%,72.715% 87.94%,75.40571% 86.24281%,75.38% 86.045%,70.635% 60.53%,89.435% 42.69%,88.42% 39.625%,67.405% 58.615%,66.89479% 59.48382%,66.88% 60.235%)
}
.mt-star-garden label:before,.mt-star-golden label:before,.mt-star-pink label:before,.mt-star-tomato label:before,.mt-star label:before {
content: "";
display: block;
position: absolute;
width: 5em;
height: 10em;
background: linear-gradient(#cac9d1,#cac9d1 42%,#91e0f8 55%,#1b68cb);
transition: .2s ease
}
.mt-star-garden input,.mt-star-golden input,.mt-star-pink input,.mt-star-tomato input,.mt-star input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-star-garden input:focus,.mt-star-golden input:focus,.mt-star-pink input:focus,.mt-star-tomato input:focus,.mt-star input:focus {
outline: 0
}
.mt-star-garden input:after,.mt-star-garden input:before,.mt-star-golden input:after,.mt-star-golden input:before,.mt-star-pink input:after,.mt-star-pink input:before,.mt-star-tomato input:after,.mt-star-tomato input:before,.mt-star input:after,.mt-star input:before {
content: "";
display: block;
position: absolute
}
.mt-star-garden input:checked+label:before,.mt-star-golden input:checked+label:before,.mt-star-pink input:checked+label:before,.mt-star-tomato input:checked+label:before,.mt-star input:checked+label:before {
transform: translateY(-50%)
}
.mt-star-garden input:disabled+label,.mt-star-golden input:disabled+label,.mt-star-pink input:disabled+label,.mt-star-tomato input:disabled+label,.mt-star input:disabled+label {
cursor: not-allowed!important
}
.mt-star-garden label:before {
background: linear-gradient(#cac9d1,#cac9d1 42%,#7fee7f 55%,#21bf73)
}
.mt-star-tomato label:before {
background: linear-gradient(#cac9d1,#cac9d1 42%,#f1a27d 55%,tomato)
}
.mt-star-pink label:before {
background: linear-gradient(#cac9d1,#cac9d1 42%,#ffc1d7 55%,#ff77a6)
}
.mt-star-golden label:before {
background: linear-gradient(#cac9d1,#cac9d1 42%,#ffed88 55%,#f3cf01)
}
.mt-heart,.mt-heart-blush,.mt-heart-golden,.mt-heart-indigo,.mt-heart-pink {
display: inline-block;
box-sizing: border-box
}
.mt-heart-blush label,.mt-heart-golden label,.mt-heart-indigo label,.mt-heart-pink label,.mt-heart label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 5em;
height: 5em;
transition: all .3s ease;
overflow: hidden;
clip-path: polygon(48.595% 85.365%,15.785% 52.815%,15.58945% 52.6185%,12.68962% 48.99466%,12.305% 48.375%,10.57963% 44.86051%,9.35896% 40.38282%,9.08571% 35.74977%,9.76901% 31.15918%,11.37828% 26.80595%,13.84412% 22.87395%,15.775% 20.7%,17.05533% 19.52258%,20.87248% 16.88208%,25.14556% 15.07038%,29.69731% 14.16234%,31.94% 14.055%,34.33933% 14.174%,38.88594% 15.10612%,43.14179% 16.95734%,46.93771% 19.62896%,50% 22.815%,50.13928% 22.64012%,53.40377% 19.34025%,57.24963% 16.74118%,61.54157% 14.97537%,66.10584% 14.13355%,68.06% 14.055%,70.74723% 14.20914%,75.28062% 15.20472%,79.51742% 17.09965%,83.2818% 19.81486%,84.225% 20.7%,86.42617% 23.22899%,88.81355% 27.2091%,90.33651% 31.59327%,90.92925% 36.19641%,90.56441% 40.82313%,89.25522% 45.27574%,87.69% 48.385%,87.0678% 49.36971%,84.215% 52.82%,51.405% 85.37%,51.05969% 85.64527%,48.595% 85.365%,31.94% 18.05%);
-webkit-clip-path: polygon(48.595% 85.365%,15.785% 52.815%,15.58945% 52.6185%,12.68962% 48.99466%,12.305% 48.375%,10.57963% 44.86051%,9.35896% 40.38282%,9.08571% 35.74977%,9.76901% 31.15918%,11.37828% 26.80595%,13.84412% 22.87395%,15.775% 20.7%,17.05533% 19.52258%,20.87248% 16.88208%,25.14556% 15.07038%,29.69731% 14.16234%,31.94% 14.055%,34.33933% 14.174%,38.88594% 15.10612%,43.14179% 16.95734%,46.93771% 19.62896%,50% 22.815%,50.13928% 22.64012%,53.40377% 19.34025%,57.24963% 16.74118%,61.54157% 14.97537%,66.10584% 14.13355%,68.06% 14.055%,70.74723% 14.20914%,75.28062% 15.20472%,79.51742% 17.09965%,83.2818% 19.81486%,84.225% 20.7%,86.42617% 23.22899%,88.81355% 27.2091%,90.33651% 31.59327%,90.92925% 36.19641%,90.56441% 40.82313%,89.25522% 45.27574%,87.69% 48.385%,87.0678% 49.36971%,84.215% 52.82%,51.405% 85.37%,51.05969% 85.64527%,48.595% 85.365%,31.94% 18.05%)
}
.mt-heart-blush label:before,.mt-heart-golden label:before,.mt-heart-indigo label:before,.mt-heart-pink label:before,.mt-heart label:before {
content: "";
display: block;
position: absolute;
width: 5em;
height: 10em;
background: linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ff7ea1 55%,#f00846);
transition: .2s ease
}
.mt-heart-blush input,.mt-heart-golden input,.mt-heart-indigo input,.mt-heart-pink input,.mt-heart input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-heart-blush input:focus,.mt-heart-golden input:focus,.mt-heart-indigo input:focus,.mt-heart-pink input:focus,.mt-heart input:focus {
outline: 0
}
.mt-heart-blush input:after,.mt-heart-blush input:before,.mt-heart-golden input:after,.mt-heart-golden input:before,.mt-heart-indigo input:after,.mt-heart-indigo input:before,.mt-heart-pink input:after,.mt-heart-pink input:before,.mt-heart input:after,.mt-heart input:before {
content: "";
display: block;
position: absolute
}
.mt-heart-blush input:checked+label:before,.mt-heart-golden input:checked+label:before,.mt-heart-indigo input:checked+label:before,.mt-heart-pink input:checked+label:before,.mt-heart input:checked+label:before {
transform: translateY(-50%)
}
.mt-heart-blush input:disabled+label,.mt-heart-golden input:disabled+label,.mt-heart-indigo input:disabled+label,.mt-heart-pink input:disabled+label,.mt-heart input:disabled+label {
cursor: not-allowed!important
}
.mt-heart-blush label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ffaab7 55%,#ff435f)
}
.mt-heart-indigo label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 42%,#a4a9ff 55%,#4b54ff)
}
.mt-heart-pink label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ffc1d7 55%,#ff77a6)
}
.mt-heart-golden label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ffe679 55%,#f3cf01)
}
.mt-ios,.mt-ios-blue,.mt-ios-red {
display: inline-block;
box-sizing: border-box
}
.mt-ios-blue label,.mt-ios-red label,.mt-ios label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 5em;
height: 3em;
border-radius: 1.5em;
background: #f8f8f8;
box-shadow: inset 0 0 0 0 #13bf11,0 0 0 .1875em #ddd;
transition: .25s ease-in-out
}
.mt-ios-blue label:before,.mt-ios-red label:before,.mt-ios label:before {
content: "";
display: block;
position: absolute;
width: 3em;
height: 3em;
border-radius: 1.5em;
background: #fff;
box-shadow: 0 .375em .375em rgba(0,0,0,.2),0 0 0 .1875em #ddd;
transition: .25s ease-in-out
}
.mt-ios-blue input,.mt-ios-red input,.mt-ios input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-ios-blue input:focus,.mt-ios-red input:focus,.mt-ios input:focus {
outline: 0
}
.mt-ios-blue input:checked+label,.mt-ios-red input:checked+label,.mt-ios input:checked+label {
box-shadow: inset 0 0 0 1.5em #13bf11,0 0 0 .1875em #13bf11
}
.mt-ios-blue input:checked+label:before,.mt-ios-red input:checked+label:before,.mt-ios input:checked+label:before {
transform: translateX(2em);
box-shadow: 0 0 0 .1875em transparent,0 .375em .375em rgba(0,0,0,.3)
}
.mt-ios-blue input:disabled+label,.mt-ios-red input:disabled+label,.mt-ios input:disabled+label {
background: #ddd!important;
box-shadow: inset 0 0 0 0 #13bf11,0 0 0 .1875em #ccc!important;
cursor: not-allowed!important
}
.mt-ios-blue input:disabled+label:before,.mt-ios-red input:disabled+label:before,.mt-ios input:disabled+label:before {
background: #eee!important;
box-shadow: none!important
}
.mt-ios-red label {
box-shadow: inset 0 0 0 0 #f35f42,0 0 0 .1875em #ddd
}
.mt-ios-red input:checked+label {
box-shadow: inset 0 0 0 1.5em #f35f42,0 0 0 .1875em #f35f42
}
.mt-ios-blue label {
box-shadow: inset 0 0 0 0 #1fc1c8,0 0 0 .1875em #ddd
}
.mt-ios-blue input:checked+label {
box-shadow: inset 0 0 0 1.5em #1fc1c8,0 0 0 .1875em #1fc1c8
}
.mt-normal,.mt-normal-garden,.mt-normal-juice,.mt-normal-navi,.mt-normal-violet {
display: inline-block;
box-sizing: border-box;
width: 7em;
height: 3em
}
.mt-normal-garden label,.mt-normal-juice label,.mt-normal-navi label,.mt-normal-violet label,.mt-normal label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 100%;
height: 100%;
border-radius: 1.5em;
background: #f0134d;
border: .5px solid hsla(0,0%,45.9%,.31);
box-shadow: inset 0 0 .25em 0 rgba(0,0,0,.2),0 -.1875em .25em rgba(0,0,0,.15);
transition: all .3s ease;
transform-origin: 20% center
}
.mt-normal-garden label:before,.mt-normal-juice label:before,.mt-normal-navi label:before,.mt-normal-violet label:before,.mt-normal label:before {
content: "";
display: block;
position: absolute;
top: .25em;
left: .25em;
width: 2.5em;
height: 2.5em;
border: 0;
border-radius: 2em;
transition: .3s ease;
box-shadow: inset .5px -1px 1px rgba(0,0,0,.35);
background: #fff
}
.mt-normal-garden label:after,.mt-normal-juice label:after,.mt-normal-navi label:after,.mt-normal-violet label:after,.mt-normal label:after {
content: "";
display: block;
position: absolute;
top: -.3125em;
left: -.25em;
width: calc(100%+.5em);
height: calc(100%+.5em);
background: transparent;
border-radius: 30px;
box-shadow: inset 0 .125em .25em -.125em rgba(0,0,0,.2),0 1px .125em 0 hsla(0,0%,59.2%,.2)
}
.mt-normal-garden input,.mt-normal-juice input,.mt-normal-navi input,.mt-normal-violet input,.mt-normal input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-normal-garden input:focus,.mt-normal-juice input:focus,.mt-normal-navi input:focus,.mt-normal-violet input:focus,.mt-normal input:focus {
outline: 0
}
.mt-normal-garden input:checked+label,.mt-normal-juice input:checked+label,.mt-normal-navi input:checked+label,.mt-normal-violet input:checked+label,.mt-normal input:checked+label {
background: #40bfc1
}
.mt-normal-garden input:checked+label:before,.mt-normal-juice input:checked+label:before,.mt-normal-navi input:checked+label:before,.mt-normal-violet input:checked+label:before,.mt-normal input:checked+label:before {
left: 4.2em
}
.mt-normal-garden input:disabled+label,.mt-normal-juice input:disabled+label,.mt-normal-navi input:disabled+label,.mt-normal-violet input:disabled+label,.mt-normal input:disabled+label {
background: #ccc!important;
border: none!important;
cursor: not-allowed!important
}
.mt-normal-garden input:disabled+label:before,.mt-normal-juice input:disabled+label:before,.mt-normal-navi input:disabled+label:before,.mt-normal-violet input:disabled+label:before,.mt-normal input:disabled+label:before {
background: #ddd!important;
box-shadow: none!important
}
.mt-normal-garden input:disabled+label:after,.mt-normal-juice input:disabled+label:after,.mt-normal-navi input:disabled+label:after,.mt-normal-violet input:disabled+label:after,.mt-normal input:disabled+label:after {
box-shadow: none!important
}
.mt-normal-garden label {
background: #ff2e63
}
.mt-normal-garden input:checked+label {
background: #21bf73
}
.mt-normal-navi label {
background: #f5f0e3
}
.mt-normal-navi input:checked+label {
background: #5f6caf
}
.mt-normal-violet label {
background: #f0e3ff
}
.mt-normal-violet input:checked+label {
background: #3e206d
}
.mt-normal-juice label {
background: #f9f6f7
}
.mt-normal-juice input:checked+label {
background: #ff971d
}
.mt-square,.mt-square-garden,.mt-square-matcha,.mt-square-pink,.mt-square-tomato {
display: inline-block;
box-sizing: border-box
}
.mt-square-garden label,.mt-square-matcha label,.mt-square-pink label,.mt-square-tomato label,.mt-square label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 8em;
height: 3em;
background: #fff;
transition: all .3s ease
}
.mt-square-garden label:before,.mt-square-matcha label:before,.mt-square-pink label:before,.mt-square-tomato label:before,.mt-square label:before {
content: "";
display: block;
position: absolute;
width: 4em;
height: 3em;
background: #f0134d;
transition: .3s ease;
z-index: 1
}
.mt-square-garden input,.mt-square-matcha input,.mt-square-pink input,.mt-square-tomato input,.mt-square input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-square-garden input:focus,.mt-square-matcha input:focus,.mt-square-pink input:focus,.mt-square-tomato input:focus,.mt-square input:focus {
outline: 0
}
.mt-square-garden input:after,.mt-square-garden input:before,.mt-square-matcha input:after,.mt-square-matcha input:before,.mt-square-pink input:after,.mt-square-pink input:before,.mt-square-tomato input:after,.mt-square-tomato input:before,.mt-square input:after,.mt-square input:before {
content: "";
display: block;
position: absolute;
width: 4em;
height: 3em;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
color: #888;
letter-spacing: 1px
}
.mt-square-garden input:before,.mt-square-matcha input:before,.mt-square-pink input:before,.mt-square-tomato input:before,.mt-square input:before {
content: "ON"
}
.mt-square-garden input:after,.mt-square-matcha input:after,.mt-square-pink input:after,.mt-square-tomato input:after,.mt-square input:after {
content: "OFF";
left: 4em
}
.mt-square-garden input:checked+label:before,.mt-square-matcha input:checked+label:before,.mt-square-pink input:checked+label:before,.mt-square-tomato input:checked+label:before,.mt-square input:checked+label:before {
background: #40bfc1;
transform: translateX(4em)
}
.mt-square-garden input:disabled:after,.mt-square-garden input:disabled:before,.mt-square-matcha input:disabled:after,.mt-square-matcha input:disabled:before,.mt-square-pink input:disabled:after,.mt-square-pink input:disabled:before,.mt-square-tomato input:disabled:after,.mt-square-tomato input:disabled:before,.mt-square input:disabled:after,.mt-square input:disabled:before {
cursor: not-allowed!important
}
.mt-square-garden input:disabled+label,.mt-square-matcha input:disabled+label,.mt-square-pink input:disabled+label,.mt-square-tomato input:disabled+label,.mt-square input:disabled+label {
background: #ccc!important;
cursor: not-allowed!important
}
.mt-square-garden input:disabled+label:before,.mt-square-matcha input:disabled+label:before,.mt-square-pink input:disabled+label:before,.mt-square-tomato input:disabled+label:before,.mt-square input:disabled+label:before {
background: #ddd!important
}
.mt-square-garden label:before {
background: #ff2e63
}
.mt-square-garden input:checked+label:before {
background: #21bf73
}
.mt-square-tomato label:before {
background: tomato
}
.mt-square-tomato input:checked+label:before {
background: #32cd32
}
.mt-square-matcha label:before {
background: #5b5656
}
.mt-square-matcha input:checked+label:before {
background: #7fcd91
}
.mt-square-pink label:before {
background: #ffe3ed
}
.mt-square-pink input:checked+label:before {
background: #beebe9
}
.mt-square3d,.mt-square3d-blush,.mt-square3d-garden,.mt-square3d-matcha,.mt-square3d-tomato {
display: inline-block;
box-sizing: border-box
}
.mt-square3d-blush label,.mt-square3d-garden label,.mt-square3d-matcha label,.mt-square3d-tomato label,.mt-square3d label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 7em;
height: 2em;
background: #fff;
box-shadow: inset 0 .1em .03em rgba(0,0,0,.2),inset 0 .1em .3em rgba(0,0,0,.3),0 0 2em hsla(0,0%,100%,.6);
transition: all .3s ease
}
.mt-square3d-blush label:before,.mt-square3d-garden label:before,.mt-square3d-matcha label:before,.mt-square3d-tomato label:before,.mt-square3d label:before {
content: "";
display: block;
position: absolute;
width: 3.6em;
height: 3.2em;
top: -.7em;
left: -.1em;
background: #f0134d;
border-bottom: .07em solid #f7449a;
box-shadow: 0 .16em .01em #b4085a,0 .12em .3em rgba(180,8,90,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2);
transition: .5s cubic-bezier(.52,-.41,.55,1.46)
}
.mt-square3d-blush input,.mt-square3d-garden input,.mt-square3d-matcha input,.mt-square3d-tomato input,.mt-square3d input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-square3d-blush input:focus,.mt-square3d-garden input:focus,.mt-square3d-matcha input:focus,.mt-square3d-tomato input:focus,.mt-square3d input:focus {
outline: 0
}
.mt-square3d-blush input:checked+label:before,.mt-square3d-garden input:checked+label:before,.mt-square3d-matcha input:checked+label:before,.mt-square3d-tomato input:checked+label:before,.mt-square3d input:checked+label:before {
background: #40bfc1;
border-bottom: .07em solid #67cccd;
box-shadow: 0 .16em .01em #2c8788,0 .12em .3em rgba(44,135,136,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2);
transform: translateX(3.5em)
}
.mt-square3d-blush input:disabled+label,.mt-square3d-garden input:disabled+label,.mt-square3d-matcha input:disabled+label,.mt-square3d-tomato input:disabled+label,.mt-square3d input:disabled+label {
background: #ccc!important;
cursor: not-allowed!important
}
.mt-square3d-blush input:disabled+label:before,.mt-square3d-garden input:disabled+label:before,.mt-square3d-matcha input:disabled+label:before,.mt-square3d-tomato input:disabled+label:before,.mt-square3d input:disabled+label:before {
background: #ccc!important;
border-bottom: .07em solid #ccc!important;
box-shadow: 0 .16em .01em #aaa,0 .12em .3em hsla(0,0%,39.2%,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)!important
}
.mt-square3d-garden label:before {
background: #ff2e63;
border-bottom: .07em solid #ff6189;
box-shadow: 0 .16em .01em #e10039,0 .12em .3em rgba(225,0,57,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)
}
.mt-square3d-garden input:checked+label:before {
background: #21bf73;
border-bottom: .07em solid #37dc8d;
box-shadow: 0 .16em .01em #167e4c,0 .12em .3em rgba(22,126,76,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)
}
.mt-square3d-tomato label:before {
background: tomato;
border-bottom: .07em solid #ff8e7a;
box-shadow: 0 .16em .01em #fa2600,0 .12em .3em rgba(250,38,0,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)
}
.mt-square3d-tomato input:checked+label:before {
background: #32cd32;
border-bottom: .07em solid #5bd75b;
box-shadow: 0 .16em .01em #239023,0 .12em .3em rgba(35,144,35,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)
}
.mt-square3d-matcha label:before {
background: #5b5656;
border-bottom: .07em solid #756f6f;
box-shadow: 0 .16em .01em #343131,0 .12em .3em rgba(52,49,49,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)
}
.mt-square3d-matcha input:checked+label:before {
background: #7fcd91;
border-bottom: .07em solid #a4dbb1;
box-shadow: 0 .16em .01em #48b862,0 .12em .3em rgba(72,184,98,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)
}
.mt-square3d-blush label:before {
background: #ff677d;
border-bottom: .07em solid #ff9aa9;
box-shadow: 0 .16em .01em #ff1b3c,0 .12em .3em rgba(255,27,60,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)
}
.mt-square3d-blush input:checked+label:before {
background: #9399ff;
border-bottom: .07em solid #c6c9ff;
box-shadow: 0 .16em .01em #4751ff,0 .12em .3em rgba(71,81,255,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)
}
.mt-transparent,.mt-transparent-blood,.mt-transparent-brown,.mt-transparent-navi,.mt-transparent-violet {
display: inline-block;
box-sizing: border-box
}
.mt-transparent-blood label,.mt-transparent-brown label,.mt-transparent-navi label,.mt-transparent-violet label,.mt-transparent label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 7em;
height: 3em;
border-radius: 50px;
background: transparent;
border: .2em solid #333;
transition: all .3s ease
}
.mt-transparent-blood label:before,.mt-transparent-brown label:before,.mt-transparent-navi label:before,.mt-transparent-violet label:before,.mt-transparent label:before {
content: "";
display: block;
position: absolute;
width: 2em;
height: 2em;
top: .3em;
left: .3em;
border-radius: 2em;
background: #333;
transition: .3s ease
}
.mt-transparent-blood input,.mt-transparent-brown input,.mt-transparent-navi input,.mt-transparent-violet input,.mt-transparent input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-transparent-blood input:focus,.mt-transparent-brown input:focus,.mt-transparent-navi input:focus,.mt-transparent-violet input:focus,.mt-transparent input:focus {
outline: 0
}
.mt-transparent-blood input:checked+label,.mt-transparent-brown input:checked+label,.mt-transparent-navi input:checked+label,.mt-transparent-violet input:checked+label,.mt-transparent input:checked+label {
background: rgba(0,0,0,.1)
}
.mt-transparent-blood input:checked+label:before,.mt-transparent-brown input:checked+label:before,.mt-transparent-navi input:checked+label:before,.mt-transparent-violet input:checked+label:before,.mt-transparent input:checked+label:before {
transform: translateX(4em)
}
.mt-transparent-blood input:disabled+label,.mt-transparent-brown input:disabled+label,.mt-transparent-navi input:disabled+label,.mt-transparent-violet input:disabled+label,.mt-transparent input:disabled+label {
background: #ccc!important;
border: .2em solid #ccc!important;
cursor: not-allowed!important
}
.mt-transparent-blood input:disabled+label:before,.mt-transparent-brown input:disabled+label:before,.mt-transparent-navi input:disabled+label:before,.mt-transparent-violet input:disabled+label:before,.mt-transparent input:disabled+label:before {
background: #ddd!important
}
.mt-transparent-navi label {
border: .2em solid #015668
}
.mt-transparent-navi label:before {
background: #015668
}
.mt-transparent-navi input:checked+label {
background: rgba(1,87,104,.18)
}
.mt-transparent-blood label {
border: .2em solid #801336
}
.mt-transparent-blood label:before {
background: #801336
}
.mt-transparent-blood input:checked+label {
background: rgba(128,19,54,.18)
}
.mt-transparent-violet label {
border: .2em solid #400082
}
.mt-transparent-violet label:before {
background: #400082
}
.mt-transparent-violet input:checked+label {
background: rgba(64,0,130,.18)
}
.mt-transparent-brown label {
border: .2em solid #b7472a
}
.mt-transparent-brown label:before {
background: #b7472a
}
.mt-transparent-brown input:checked+label {
background: rgba(183,71,42,.18)
}
.mt-icon-cam,.mt-icon-mic,.mt-icon-music,.mt-icon-pin,.mt-icon-ring {
display: inline-block;
box-sizing: border-box
}
.mt-icon-cam label,.mt-icon-mic label,.mt-icon-music label,.mt-icon-pin label,.mt-icon-ring label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 4.5em;
height: 4.5em;
transition: all .3s ease;
overflow: hidden;
clip-path: polygon(26.43% 80.22%,22.65% 80.45%,19.15% 81.12%,15.99% 82.17%,13.25% 83.58%,10.99% 85.29%,9.29% 87.27%,8.19% 89.47%,7.78% 91.85%,8.05% 94.09%,8.89% 95.91%,10.22% 97.35%,11.93% 98.44%,13.95% 99.21%,16.18% 99.71%,18.52% 99.95%,20.9% 99.99%,23.45% 99.73%,26.27% 99.09%,29.16% 98.09%,31.95% 96.73%,34.45% 95.04%,36.46% 93.03%,37.8% 90.72%,38.29% 88.13%,38.29% 44.64%,68.39% 38.31%,67.6% 73.64%,63.66% 73.9%,60.21% 74.64%,57.26% 75.8%,54.83% 77.31%,52.96% 79.12%,51.68% 81.17%,50.99% 83.41%,50.94% 85.76%,51.48% 87.95%,52.48% 89.76%,53.88% 91.21%,55.61% 92.31%,57.59% 93.09%,59.77% 93.56%,62.05% 93.74%,64.39% 93.66%,66.89% 93.22%,69.6% 92.33%,72.37% 91.02%,75.02% 89.34%,77.38% 87.3%,79.27% 84.95%,80.53% 82.31%,80.99% 79.43%,80.99% 9.85%,25.64% 21.71%);
-webkit-clip-path: polygon(26.43% 80.22%,22.65% 80.45%,19.15% 81.12%,15.99% 82.17%,13.25% 83.58%,10.99% 85.29%,9.29% 87.27%,8.19% 89.47%,7.78% 91.85%,8.05% 94.09%,8.89% 95.91%,10.22% 97.35%,11.93% 98.44%,13.95% 99.21%,16.18% 99.71%,18.52% 99.95%,20.9% 99.99%,23.45% 99.73%,26.27% 99.09%,29.16% 98.09%,31.95% 96.73%,34.45% 95.04%,36.46% 93.03%,37.8% 90.72%,38.29% 88.13%,38.29% 44.64%,68.39% 38.31%,67.6% 73.64%,63.66% 73.9%,60.21% 74.64%,57.26% 75.8%,54.83% 77.31%,52.96% 79.12%,51.68% 81.17%,50.99% 83.41%,50.94% 85.76%,51.48% 87.95%,52.48% 89.76%,53.88% 91.21%,55.61% 92.31%,57.59% 93.09%,59.77% 93.56%,62.05% 93.74%,64.39% 93.66%,66.89% 93.22%,69.6% 92.33%,72.37% 91.02%,75.02% 89.34%,77.38% 87.3%,79.27% 84.95%,80.53% 82.31%,80.99% 79.43%,80.99% 9.85%,25.64% 21.71%)
}
.mt-icon-cam label:before,.mt-icon-mic label:before,.mt-icon-music label:before,.mt-icon-pin label:before,.mt-icon-ring label:before {
content: "";
display: block;
position: absolute;
width: 4.5em;
height: 9em;
background: linear-gradient(185deg,#cac9d1,#cac9d1 50%,#ff84a5 58%,#ff7cc8);
transition: .3s ease
}
.mt-icon-cam input,.mt-icon-mic input,.mt-icon-music input,.mt-icon-pin input,.mt-icon-ring input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-icon-cam input:focus,.mt-icon-mic input:focus,.mt-icon-music input:focus,.mt-icon-pin input:focus,.mt-icon-ring input:focus {
outline: 0
}
.mt-icon-cam input:after,.mt-icon-cam input:before,.mt-icon-mic input:after,.mt-icon-mic input:before,.mt-icon-music input:after,.mt-icon-music input:before,.mt-icon-pin input:after,.mt-icon-pin input:before,.mt-icon-ring input:after,.mt-icon-ring input:before {
content: "";
display: block;
position: absolute
}
.mt-icon-cam input:before,.mt-icon-mic input:before,.mt-icon-music input:before,.mt-icon-pin input:before,.mt-icon-ring input:before {
background: #cac9d1;
border: .25em solid #f5f5f5;
width: 4.5em;
height: .3em;
transform: rotate(40deg) translate(.875em,1.825em);
transition: .1s ease
}
.mt-icon-cam input:checked:before,.mt-icon-mic input:checked:before,.mt-icon-music input:checked:before,.mt-icon-pin input:checked:before,.mt-icon-ring input:checked:before {
border: .25em solid transparent;
background: transparent
}
.mt-icon-cam input:checked+label:before,.mt-icon-mic input:checked+label:before,.mt-icon-music input:checked+label:before,.mt-icon-pin input:checked+label:before,.mt-icon-ring input:checked+label:before {
transform: translateY(-50%)
}
.mt-icon-cam input:disabled+label,.mt-icon-cam input:disabled:before,.mt-icon-mic input:disabled+label,.mt-icon-mic input:disabled:before,.mt-icon-music input:disabled+label,.mt-icon-music input:disabled:before,.mt-icon-pin input:disabled+label,.mt-icon-pin input:disabled:before,.mt-icon-ring input:disabled+label,.mt-icon-ring input:disabled:before {
cursor: not-allowed!important
}
.mt-icon-ring label {
clip-path: polygon(45% 23.44%,42.04% 23.73%,39.5% 24.58%,37.34% 25.93%,35.53% 27.7%,34.05% 29.86%,32.86% 32.32%,31.93% 35.04%,31.22% 37.96%,30.71% 41.02%,30.37% 44.15%,30.16% 47.3%,30.05% 50.4%,30.01% 53.41%,30.01% 56.25%,30.02% 58.87%,30% 61.22%,29.46% 61.49%,29% 61.83%,28.59% 62.21%,28.24% 62.62%,27.95% 63.06%,27.71% 63.51%,27.51% 63.97%,27.36% 64.42%,27.23% 64.86%,27.14% 65.27%,27.08% 65.65%,27.04% 65.98%,27.02% 66.26%,27% 66.47%,27% 66.6%,27% 66.64%,27.01% 67.73%,27.06% 68.72%,27.19% 69.61%,27.42% 70.41%,27.79% 71.12%,28.33% 71.74%,29.07% 72.29%,30.04% 72.75%,31.27% 73.15%,32.81% 73.48%,34.67% 73.75%,36.89% 73.96%,39.5% 74.11%,42.53% 74.22%,46.02% 74.28%,50% 74.3%,50% 74.61%,50% 74.92%,50% 75.23%,50% 75.54%,50% 75.85%,50% 76.16%,50% 76.47%,50% 76.78%,50% 77.09%,50% 77.4%,50% 77.71%,50% 78.02%,50% 78.33%,50% 78.64%,50% 78.95%,50% 79.25%,49.13% 79.25%,48.27% 79.23%,47.43% 79.2%,46.62% 79.15%,45.84% 79.11%,45.1% 79.05%,44.4% 78.99%,43.74% 78.93%,43.15% 78.87%,42.61% 78.82%,42.14% 78.76%,41.75% 78.71%,41.43% 78.67%,41.19% 78.64%,41.05% 78.62%,41% 78.61%,40.99% 78.71%,40.95% 78.99%,40.93% 79.42%,40.92% 79.98%,40.96% 80.65%,41.06% 81.39%,41.24% 82.18%,41.53% 83%,41.94% 83.82%,42.49% 84.61%,43.21% 85.35%,44.11% 86.02%,45.21% 86.58%,46.53% 87.01%,48.1% 87.29%,49.93% 87.39%,51.75% 87.29%,53.32% 87.01%,54.65% 86.58%,55.76% 86.02%,56.67% 85.35%,57.4% 84.61%,57.97% 83.82%,58.39% 83%,58.69% 82.18%,58.89% 81.39%,59.01% 80.65%,59.06% 79.98%,59.06% 79.42%,59.04% 78.99%,59.01% 78.71%,59% 78.61%,58.95% 78.62%,58.81% 78.64%,58.57% 78.67%,58.25% 78.71%,57.86% 78.76%,57.39% 78.82%,56.85% 78.87%,56.26% 78.93%,55.61% 78.99%,54.91% 79.05%,54.16% 79.11%,53.38% 79.15%,52.57% 79.2%,51.73% 79.23%,50.87% 79.25%,50% 79.25%,50% 78.95%,50% 78.64%,50% 78.33%,50% 78.02%,50% 77.71%,50% 77.4%,50% 77.09%,50% 76.78%,50% 76.47%,50% 76.16%,50% 75.85%,50% 75.54%,50% 75.23%,50% 74.92%,50% 74.61%,50% 74.3%,53.96% 74.25%,57.44% 74.1%,60.47% 73.87%,63.07% 73.55%,65.29% 73.17%,67.15% 72.74%,68.69% 72.25%,69.93% 71.72%,70.9% 71.17%,71.65% 70.59%,72.19% 70.01%,72.57% 69.42%,72.8% 68.84%,72.93% 68.28%,72.99% 67.74%,73% 67.24%,73% 67.19%,73% 67.04%,73% 66.8%,72.98% 66.48%,72.95% 66.1%,72.89% 65.67%,72.81% 65.19%,72.7% 64.68%,72.55% 64.16%,72.35% 63.63%,72.11% 63.1%,71.82% 62.59%,71.46% 62.11%,71.05% 61.66%,70.56% 61.27%,70% 60.94%,70.02% 58.61%,70.05% 56%,70.07% 53.18%,70.04% 50.19%,69.93% 47.11%,69.72% 43.98%,69.37% 40.88%,68.85% 37.84%,68.14% 34.95%,67.19% 32.25%,65.99% 29.8%,64.49% 27.67%,62.68% 25.91%,60.51% 24.57%,57.96% 23.73%,55% 23.44%,55% 23.35%,55% 23.12%,55% 22.75%,54.97% 22.28%,54.91% 21.71%,54.82% 21.08%,54.69% 20.41%,54.5% 19.72%,54.25% 19.02%,53.92% 18.35%,53.52% 17.72%,53.03% 17.16%,52.44% 16.69%,51.74% 16.32%,50.93% 16.08%,50% 16%,49.07% 16.08%,48.26% 16.32%,47.56% 16.69%,46.97% 17.16%,46.48% 17.72%,46.08% 18.35%,45.75% 19.02%,45.5% 19.72%,45.31% 20.41%,45.18% 21.08%,45.09% 21.71%,45.03% 22.28%,45% 22.75%,45% 23.12%,45% 23.35%);
-webkit-clip-path: polygon(45% 23.44%,42.04% 23.73%,39.5% 24.58%,37.34% 25.93%,35.53% 27.7%,34.05% 29.86%,32.86% 32.32%,31.93% 35.04%,31.22% 37.96%,30.71% 41.02%,30.37% 44.15%,30.16% 47.3%,30.05% 50.4%,30.01% 53.41%,30.01% 56.25%,30.02% 58.87%,30% 61.22%,29.46% 61.49%,29% 61.83%,28.59% 62.21%,28.24% 62.62%,27.95% 63.06%,27.71% 63.51%,27.51% 63.97%,27.36% 64.42%,27.23% 64.86%,27.14% 65.27%,27.08% 65.65%,27.04% 65.98%,27.02% 66.26%,27% 66.47%,27% 66.6%,27% 66.64%,27.01% 67.73%,27.06% 68.72%,27.19% 69.61%,27.42% 70.41%,27.79% 71.12%,28.33% 71.74%,29.07% 72.29%,30.04% 72.75%,31.27% 73.15%,32.81% 73.48%,34.67% 73.75%,36.89% 73.96%,39.5% 74.11%,42.53% 74.22%,46.02% 74.28%,50% 74.3%,50% 74.61%,50% 74.92%,50% 75.23%,50% 75.54%,50% 75.85%,50% 76.16%,50% 76.47%,50% 76.78%,50% 77.09%,50% 77.4%,50% 77.71%,50% 78.02%,50% 78.33%,50% 78.64%,50% 78.95%,50% 79.25%,49.13% 79.25%,48.27% 79.23%,47.43% 79.2%,46.62% 79.15%,45.84% 79.11%,45.1% 79.05%,44.4% 78.99%,43.74% 78.93%,43.15% 78.87%,42.61% 78.82%,42.14% 78.76%,41.75% 78.71%,41.43% 78.67%,41.19% 78.64%,41.05% 78.62%,41% 78.61%,40.99% 78.71%,40.95% 78.99%,40.93% 79.42%,40.92% 79.98%,40.96% 80.65%,41.06% 81.39%,41.24% 82.18%,41.53% 83%,41.94% 83.82%,42.49% 84.61%,43.21% 85.35%,44.11% 86.02%,45.21% 86.58%,46.53% 87.01%,48.1% 87.29%,49.93% 87.39%,51.75% 87.29%,53.32% 87.01%,54.65% 86.58%,55.76% 86.02%,56.67% 85.35%,57.4% 84.61%,57.97% 83.82%,58.39% 83%,58.69% 82.18%,58.89% 81.39%,59.01% 80.65%,59.06% 79.98%,59.06% 79.42%,59.04% 78.99%,59.01% 78.71%,59% 78.61%,58.95% 78.62%,58.81% 78.64%,58.57% 78.67%,58.25% 78.71%,57.86% 78.76%,57.39% 78.82%,56.85% 78.87%,56.26% 78.93%,55.61% 78.99%,54.91% 79.05%,54.16% 79.11%,53.38% 79.15%,52.57% 79.2%,51.73% 79.23%,50.87% 79.25%,50% 79.25%,50% 78.95%,50% 78.64%,50% 78.33%,50% 78.02%,50% 77.71%,50% 77.4%,50% 77.09%,50% 76.78%,50% 76.47%,50% 76.16%,50% 75.85%,50% 75.54%,50% 75.23%,50% 74.92%,50% 74.61%,50% 74.3%,53.96% 74.25%,57.44% 74.1%,60.47% 73.87%,63.07% 73.55%,65.29% 73.17%,67.15% 72.74%,68.69% 72.25%,69.93% 71.72%,70.9% 71.17%,71.65% 70.59%,72.19% 70.01%,72.57% 69.42%,72.8% 68.84%,72.93% 68.28%,72.99% 67.74%,73% 67.24%,73% 67.19%,73% 67.04%,73% 66.8%,72.98% 66.48%,72.95% 66.1%,72.89% 65.67%,72.81% 65.19%,72.7% 64.68%,72.55% 64.16%,72.35% 63.63%,72.11% 63.1%,71.82% 62.59%,71.46% 62.11%,71.05% 61.66%,70.56% 61.27%,70% 60.94%,70.02% 58.61%,70.05% 56%,70.07% 53.18%,70.04% 50.19%,69.93% 47.11%,69.72% 43.98%,69.37% 40.88%,68.85% 37.84%,68.14% 34.95%,67.19% 32.25%,65.99% 29.8%,64.49% 27.67%,62.68% 25.91%,60.51% 24.57%,57.96% 23.73%,55% 23.44%,55% 23.35%,55% 23.12%,55% 22.75%,54.97% 22.28%,54.91% 21.71%,54.82% 21.08%,54.69% 20.41%,54.5% 19.72%,54.25% 19.02%,53.92% 18.35%,53.52% 17.72%,53.03% 17.16%,52.44% 16.69%,51.74% 16.32%,50.93% 16.08%,50% 16%,49.07% 16.08%,48.26% 16.32%,47.56% 16.69%,46.97% 17.16%,46.48% 17.72%,46.08% 18.35%,45.75% 19.02%,45.5% 19.72%,45.31% 20.41%,45.18% 21.08%,45.09% 21.71%,45.03% 22.28%,45% 22.75%,45% 23.12%,45% 23.35%)
}
.mt-icon-ring label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 44%,#fe346e 55%,#ffbd69)
}
.mt-icon-mic label {
clip-path: polygon(50% 77.33%,50% 78.16%,50% 79%,50% 79.83%,50% 80.67%,50% 81.5%,50% 82.33%,50% 83.17%,50% 84%,42.51% 83.05%,36.94% 80.5%,33.01% 76.77%,30.43% 72.29%,28.93% 67.5%,28.2% 62.81%,27.98% 58.66%,27.97% 55.48%,27.97% 55.33%,27.93% 54.92%,27.81% 54.35%,27.55% 53.7%,27.1% 53.04%,26.42% 52.47%,25.46% 52.06%,24.15% 51.91%,22.85% 52.06%,21.88% 52.47%,21.2% 53.04%,20.76% 53.7%,20.5% 54.35%,20.38% 54.92%,20.34% 55.33%,20.34% 55.48%,21.02% 66.56%,22.92% 75.16%,25.79% 81.59%,29.38% 86.16%,33.46% 89.18%,37.78% 90.95%,42.1% 91.79%,46.19% 92%,46.16% 93.56%,46.14% 94.98%,46.19% 96.23%,46.38% 97.3%,46.79% 98.16%,47.48% 98.81%,48.52% 99.21%,50% 99.36%,51.49% 99.26%,52.59% 98.92%,53.35% 98.35%,53.83% 97.54%,54.1% 96.5%,54.22% 95.23%,54.24% 93.73%,54.24% 92%,60.56% 91.21%,65.86% 88.97%,70.18% 85.46%,73.6% 80.87%,76.15% 75.39%,77.9% 69.21%,78.91% 62.51%,79.24% 55.48%,79.23% 55.33%,79.19% 54.92%,79.06% 54.35%,78.8% 53.69%,78.35% 53.04%,77.67% 52.47%,76.71% 52.06%,75.42% 51.91%,74.13% 52.06%,73.17% 52.47%,72.49% 53.04%,72.05% 53.69%,71.78% 54.35%,71.65% 54.92%,71.61% 55.33%,71.61% 55.48%,71.65% 56.74%,71.54% 60.05%,70.97% 64.72%,69.62% 70.05%,67.17% 75.33%,63.3% 79.89%,57.68% 83.01%,50% 84%,50% 83.17%,50% 82.33%,50% 81.5%,50% 80.67%,50% 79.83%,50% 79%,50% 78.16%,50% 77.33%,55.71% 76.77%,59.99% 75.11%,63.04% 72.38%,65.08% 68.63%,66.3% 63.88%,66.92% 58.16%,67.13% 51.53%,67.16% 44%,67.12% 36.47%,66.87% 29.82%,66.22% 24.1%,64.95% 19.34%,62.87% 15.57%,59.79% 12.83%,55.49% 11.16%,49.79% 10.59%,44.1% 11.12%,39.86% 12.69%,36.85% 15.31%,34.85% 18.97%,33.66% 23.67%,33.07% 29.41%,32.87% 36.19%,32.84% 44%,32.85% 51.81%,33.06% 58.58%,33.67% 64.31%,34.88% 69%,36.91% 72.64%,39.97% 75.25%,44.26% 76.81%);
-webkit-clip-path: polygon(50% 77.33%,50% 78.16%,50% 79%,50% 79.83%,50% 80.67%,50% 81.5%,50% 82.33%,50% 83.17%,50% 84%,42.51% 83.05%,36.94% 80.5%,33.01% 76.77%,30.43% 72.29%,28.93% 67.5%,28.2% 62.81%,27.98% 58.66%,27.97% 55.48%,27.97% 55.33%,27.93% 54.92%,27.81% 54.35%,27.55% 53.7%,27.1% 53.04%,26.42% 52.47%,25.46% 52.06%,24.15% 51.91%,22.85% 52.06%,21.88% 52.47%,21.2% 53.04%,20.76% 53.7%,20.5% 54.35%,20.38% 54.92%,20.34% 55.33%,20.34% 55.48%,21.02% 66.56%,22.92% 75.16%,25.79% 81.59%,29.38% 86.16%,33.46% 89.18%,37.78% 90.95%,42.1% 91.79%,46.19% 92%,46.16% 93.56%,46.14% 94.98%,46.19% 96.23%,46.38% 97.3%,46.79% 98.16%,47.48% 98.81%,48.52% 99.21%,50% 99.36%,51.49% 99.26%,52.59% 98.92%,53.35% 98.35%,53.83% 97.54%,54.1% 96.5%,54.22% 95.23%,54.24% 93.73%,54.24% 92%,60.56% 91.21%,65.86% 88.97%,70.18% 85.46%,73.6% 80.87%,76.15% 75.39%,77.9% 69.21%,78.91% 62.51%,79.24% 55.48%,79.23% 55.33%,79.19% 54.92%,79.06% 54.35%,78.8% 53.69%,78.35% 53.04%,77.67% 52.47%,76.71% 52.06%,75.42% 51.91%,74.13% 52.06%,73.17% 52.47%,72.49% 53.04%,72.05% 53.69%,71.78% 54.35%,71.65% 54.92%,71.61% 55.33%,71.61% 55.48%,71.65% 56.74%,71.54% 60.05%,70.97% 64.72%,69.62% 70.05%,67.17% 75.33%,63.3% 79.89%,57.68% 83.01%,50% 84%,50% 83.17%,50% 82.33%,50% 81.5%,50% 80.67%,50% 79.83%,50% 79%,50% 78.16%,50% 77.33%,55.71% 76.77%,59.99% 75.11%,63.04% 72.38%,65.08% 68.63%,66.3% 63.88%,66.92% 58.16%,67.13% 51.53%,67.16% 44%,67.12% 36.47%,66.87% 29.82%,66.22% 24.1%,64.95% 19.34%,62.87% 15.57%,59.79% 12.83%,55.49% 11.16%,49.79% 10.59%,44.1% 11.12%,39.86% 12.69%,36.85% 15.31%,34.85% 18.97%,33.66% 23.67%,33.07% 29.41%,32.87% 36.19%,32.84% 44%,32.85% 51.81%,33.06% 58.58%,33.67% 64.31%,34.88% 69%,36.91% 72.64%,39.97% 75.25%,44.26% 76.81%)
}
.mt-icon-mic label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 50%,#00a8cc 60%,#27496d)
}
.mt-icon-cam label {
clip-path: polygon(89.59% 23.16%,70.43% 35.56%,70.43% 31.86%,70.43% 31.77%,69.92% 28.87%,68.51% 26.28%,66.35% 24.28%,63.66% 23.08%,61.35% 22.78%,15.95% 22.78%,13.43% 23.14%,10.77% 24.41%,8.66% 26.46%,7.31% 29.07%,6.87% 31.86%,6.87% 68.16%,7.16% 70.42%,8.35% 73.11%,10.34% 75.28%,12.91% 76.71%,15.81% 77.23%,15.95% 77.23%,61.35% 77.23%,63.13% 77.06%,65.89% 76.02%,68.16% 74.15%,69.73% 71.66%,70.41% 68.79%,70.43% 68.16%,70.43% 64.47%,89.59% 76.86%,91.92% 76.91%,93.13% 74.97%,93.13% 25.05%,92.91% 24.14%,90.53% 22.8%,89.59% 23.16%,65.89% 68.16%,65.48% 70.05%);
-webkit-clip-path: polygon(89.59% 23.16%,70.43% 35.56%,70.43% 31.86%,70.43% 31.77%,69.92% 28.87%,68.51% 26.28%,66.35% 24.28%,63.66% 23.08%,61.35% 22.78%,15.95% 22.78%,13.43% 23.14%,10.77% 24.41%,8.66% 26.46%,7.31% 29.07%,6.87% 31.86%,6.87% 68.16%,7.16% 70.42%,8.35% 73.11%,10.34% 75.28%,12.91% 76.71%,15.81% 77.23%,15.95% 77.23%,61.35% 77.23%,63.13% 77.06%,65.89% 76.02%,68.16% 74.15%,69.73% 71.66%,70.41% 68.79%,70.43% 68.16%,70.43% 64.47%,89.59% 76.86%,91.92% 76.91%,93.13% 74.97%,93.13% 25.05%,92.91% 24.14%,90.53% 22.8%,89.59% 23.16%,65.89% 68.16%,65.48% 70.05%)
}
.mt-icon-cam label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 45%,#ffab9c 55%,#c9485b)
}
.mt-icon-pin label {
clip-path: polygon(87.96% 44.68%,55.3% 12.01%,53.39% 10.48%,51.57% 11.9%,51.55% 12.29%,51.56% 27.29%,27.13% 45.38%,12.46% 45.38%,10.38% 46.43%,11% 49.16%,10.9% 49.13%,29.31% 67.52%,13.91% 83.06%,13.57% 83.5%,13.89% 86.15%,13.91% 86.17%,16.53% 86.52%,17% 86.17%,32.49% 70.7%,50.86% 89.13%,50.91% 89.08%,53.67% 89.62%,54.73% 87.64%,54.73% 72.82%,72.73% 48.46%,86.41% 48.43%,88.16% 48.36%,89.45% 46.53%,87.96% 44.68%,17.67% 49.52%,27.2% 49.52%);
-webkit-clip-path: polygon(87.96% 44.68%,55.3% 12.01%,53.39% 10.48%,51.57% 11.9%,51.55% 12.29%,51.56% 27.29%,27.13% 45.38%,12.46% 45.38%,10.38% 46.43%,11% 49.16%,10.9% 49.13%,29.31% 67.52%,13.91% 83.06%,13.57% 83.5%,13.89% 86.15%,13.91% 86.17%,16.53% 86.52%,17% 86.17%,32.49% 70.7%,50.86% 89.13%,50.91% 89.08%,53.67% 89.62%,54.73% 87.64%,54.73% 72.82%,72.73% 48.46%,86.41% 48.43%,88.16% 48.36%,89.45% 46.53%,87.96% 44.68%,17.67% 49.52%,27.2% 49.52%)
}
.mt-icon-pin label:before {
background: linear-gradient(200deg,#cac9d1,#cac9d1 47%,#ffe2b0 57%,#ff7315)
}
.mt-io,.mt-io-garden,.mt-io-navi,.mt-io-violet,.mt-io-yellow {
display: inline-block;
box-sizing: border-box
}
.mt-io-garden label,.mt-io-navi label,.mt-io-violet label,.mt-io-yellow label,.mt-io label {
display: inline-block;
position: relative;
box-sizing: border-box;
cursor: pointer;
width: 5.5em;
height: 2.5em;
border-radius: 2.5em;
background-image: linear-gradient(90deg,#dedede 0,#dedede 50%,#fe6845 0,#fe6845);
background-size: 11em 2.5em;
transition: all .3s ease
}
.mt-io-garden label:before,.mt-io-navi label:before,.mt-io-violet label:before,.mt-io-yellow label:before,.mt-io label:before {
content: "";
display: block;
position: absolute;
width: 3em;
height: 3em;
top: -.25em;
left: 0;
border-radius: 2em;
background: #fff;
transition: .3s ease;
box-shadow: 0 .2em .45em rgba(0,0,0,.3);
z-index: 1
}
.mt-io-garden input,.mt-io-navi input,.mt-io-violet input,.mt-io-yellow input,.mt-io input {
position: absolute;
box-sizing: border-box;
height: 0;
width: 0;
font-size: inherit;
margin: 0;
border: 0;
z-index: 1;
cursor: pointer;
-moz-appearance: none;
-webkit-appearance: none
}
.mt-io-garden input:focus,.mt-io-navi input:focus,.mt-io-violet input:focus,.mt-io-yellow input:focus,.mt-io input:focus {
outline: 0
}
.mt-io-garden input:after,.mt-io-garden input:before,.mt-io-navi input:after,.mt-io-navi input:before,.mt-io-violet input:after,.mt-io-violet input:before,.mt-io-yellow input:after,.mt-io-yellow input:before,.mt-io input:after,.mt-io input:before {
content: "";
display: block;
position: absolute;
z-index: 0;
border-radius: 1em
}
.mt-io-garden input:before,.mt-io-navi input:before,.mt-io-violet input:before,.mt-io-yellow input:before,.mt-io input:before {.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0