SVG CSS复选框

下载代码

html

css

分享到微信朋友圈

html

<h1>SVG toggle animation</h1>
<h2>A full css/svg checkbox button</h2>
<hr>
<div class='checkbox'>
  <label class='checkbox__container'>
    <input class='checkbox__toggle' type='checkbox'>
    <span class='checkbox__checker anim'></span>
    <svg class='checkbox__path' id='checkbox__path' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
      <path class='path path--top' d='M194.27,59.599l42.438-42.028
		c-9.086-10.419-22.443-17.006-37.215-17.006c-35.529,0-46.643,27.712-75.047,27.712s-38-27.712-75.072-27.712
		c-13.45,0-25.621,5.355-34.514,14.045l48.098,48.113'></path>
      <path class='path path--bottom' d='M183.561,48.822l42.521,42.794
		c-7.649,4.874-16.759,7.697-26.589,7.697c-34.914,0-46.643-30.202-75.06-30.202s-35.527,30.202-75.06,30.202
		c-13.431,0-25.502-5.255-34.346-13.8l47.93-48.18'></path>
    </svg>
    <svg class='checkbox__bg' id='checkbox__bg' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
      <path class='shape-bg' d='M199.493,99.087c27.504,0,49.374-22.106,49.374-49.374S226.552,0.338,199.493,0.338c-35.529,0-46.643,27.712-75.047,27.712
		s-38-27.712-75.072-27.712C22.048,0.338,0,22.444,0,49.713s21.826,49.374,49.374,49.374c39.533,0,46.643-30.202,75.06-30.202
		S164.58,99.087,199.493,99.087z'></path>
    </svg>
  </label>
</div>

css

body {
  background-color: #eee;
  padding-top: 40px;
}

h1 {
  text-align: center;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

h2 {
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

hr {
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}

footer {
  text-align: center;
  padding-bottom: 50px;
}

.link {
  text-align: center;
  color: #278fb2;
}

.checkbox {
  width: 200px;
  margin: 0 auto;
}
.checkbox__container {
  display: block;
  position: relative;
  height: 82px;
}
.checkbox__toggle {
  display: none;
}
.checkbox__toggle:checked ~ .checkbox__path .path--top {
  stroke-dashoffset: 0px;
  stroke: #0cb018;
}
.checkbox__toggle:checked ~ .checkbox__path .path--bottom {
  stroke-dasharray: 14px 360px;
  stroke-dashoffset: 0px;
  stroke: #0cb018;
}
.checkbox__checker {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  display: block;
  width: 73px;
  height: 73px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 9;
}
.checkbox__bg, .checkbox__path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.checkbox__bg .shape-bg {
  fill: #aaa;
}
.checkbox__path {
  z-index: 9;
}
.checkbox__path .shape-bg {
  fill: #fff;
  stroke-width: 1px;
  stroke: #aaa;
}
.checkbox__path .path {
  stroke-width: 4px;
  stroke: #bf1e1e;
  fill: none;
  stroke-linecap: round;
  transition: 1s;
}
.checkbox__path .path--top {
  stroke-dasharray: 33px 360px;
  stroke-dashoffset: -336px;
}
.checkbox__path .path--bottom {
  stroke-dasharray: 33px 360px;
  stroke-dashoffset: -324px;
}
.checkbox #checkbox__circle {
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: #fff;
}

.anim {
  transition-timing-function: cubic-bezier(0.385, -0.6, 0.685, 1.59);
  transition-duration: .2s;
}

.anim--go-right {
  left: calc(100% - 76px);
}

.anim--speed {
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-name: speedSmall;
          animation-name: speedSmall;
}

@-webkit-keyframes speed {
  0% {
    -webkit-transform: scaleY(0.6);
            transform: scaleY(0.6);
  }
  30% {
    -webkit-transform: scaleY(2.3);
            transform: scaleY(2.3);
  }
  60% {
    -webkit-transform: scaleY(2.3);
            transform: scaleY(2.3);
  }
  100% {
    -webkit-transform: scaleY(0.6);
            transform: scaleY(0.6);
  }
}

@keyframes speed {
  0% {
    -webkit-transform: scaleY(0.6);
            transform: scaleY(0.6);
  }
  30% {
    -webkit-transform: scaleY(2.3);
            transform: scaleY(2.3);
  }
  60% {
    -webkit-transform: scaleY(2.3);
            transform: scaleY(2.3);
  }
  100% {
    -webkit-transform: scaleY(0.6);
            transform: scaleY(0.6);
  }
}
@-webkit-keyframes speedSmall {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  35% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  50% {
    -webkit-transform: scale(0.7, 0.3);
            transform: scale(0.7, 0.3);
  }
  65% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  75% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes speedSmall {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  25% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  35% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  50% {
    -webkit-transform: scale(0.7, 0.3);
            transform: scale(0.7, 0.3);
  }
  65% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  75% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg