svg单选按钮

下载代码

html

css

分享到微信朋友圈

html

<div class="container">
  <div class="name">
    <svg class="gear">
      <path d="M15 6.675l-1.8-.6c-.2-.1-.3-.3-.2-.4l.9-1.7c.6-1.2-.7-2.5-1.9-1.9l-1.7.9c-.1.1-.3 0-.4-.2l-.6-1.8c-.4-1.3-2.2-1.3-2.6 0l-.6 1.8c-.1.2-.3.3-.4.2l-1.7-.9c-1.2-.6-2.5.7-1.9 1.9l.9 1.7c.1.1 0 .3-.2.4l-1.8.6c-1.3.4-1.3 2.3 0 2.7l1.8.6c.2 0 .3.2.2.3l-.9 1.7c-.6 1.2.7 2.5 1.9 1.9l1.7-.9c.2-.1.4 0 .4.2l.6 1.8c.4 1.3 2.3 1.3 2.7 0l.6-1.8c.1-.2.3-.3.4-.2l1.7.9c1.2.6 2.5-.7 1.9-1.9l-1-1.7c-.1-.2 0-.4.2-.4l1.8-.6c1.3-.4 1.3-2.2 0-2.6zm-7 3.7c-1.3 0-2.4-1.1-2.4-2.4 0-1.3 1.1-2.4 2.4-2.4 1.3 0 2.4 1.1 2.4 2.4 0 1.3-1.1 2.4-2.4 2.4z" fill="#4c4f5a">     </path>
    </svg>
    <h4>Click on the radio buttons or labels</h4>
  </div>
  <input type="radio" name="field" id="Uno"/>
  <label for="Uno">
    <svg class="check" viewbox="0 0 40 40">
      <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
          <stop offset="0%" stop-color="#ff8a00"></stop>
          <stop offset="100%" stop-color="#da1b60"></stop>
        </linearGradient>
      </defs>
      <circle id="border" r="18px" cx="20px" cy="20px"></circle>
      <circle id="dot" r="8px" cx="20px" cy="20px"></circle>
    </svg>I like this work
  </label>
  <input type="radio" name="field" id="Dos"/>
  <label for="Dos">
    <svg class="check" viewbox="0 0 40 40">
      <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
          <stop offset="0%" stop-color="#ff8a00"></stop>
          <stop offset="100%" stop-color="#da1b60"></stop>
        </linearGradient>
      </defs>
      <circle id="border" r="18px" cx="20px" cy="20px"></circle>
      <circle id="dot" r="8px" cx="20px" cy="20px"></circle>
    </svg>Share in social networks
  </label>
  <input type="radio" name="field" id="Tres"/>
  <label for="Tres">
    <svg class="check" viewbox="0 0 40 40">
      <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
          <stop offset="0%" stop-color="#ff8a00"></stop>
          <stop offset="100%" stop-color="#da1b60"></stop>
        </linearGradient>
      </defs>
      <circle id="border" r="18px" cx="20px" cy="20px"></circle>
      <circle id="dot" r="8px" cx="20px" cy="20px"></circle>
    </svg>Follow the author
  </label>
</div>

css

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font: 400 1.35rem sans-serif;
  color: #7a7a8c;
  background-color: #1d1e22;
  background: radial-gradient(#4c4f5a 6%, transparent 6%), #18191c;
  background-position: 0 0, 25px 25px;
  background-size: 25px 25px;
}

a {
  text-decoration: none;
  color: #7a7a8c;
  font-size: 0.675rem;
}

.container {
  position: relative;
  padding: 0.675rem;
  display: flex;
  min-width: 400px;
  height: auto;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.45rem;
  background-color: #1d1e22;
  box-shadow: 0 5px 30px rgba(1, 1, 1, 0.3);
}
.container .name {
  margin-bottom: 0.675rem;
  display: flex;
  justify-content: flex-end;
}
.container .name h4 {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: normal;
  color: #dadadf;
  transform: scale(0);
  transform-origin: 100% 50%;
  transition: transform 500ms ease;
}
.container svg {
  width: 1.35rem;
  height: 1.35rem;
}
.container svg.gear {
  order: 1;
  margin-left: 1.35rem;
  cursor: help;
}
.container svg.gear:hover ~ h4 {
  transform: scale(1);
}

.btn {
  position: absolute;
  bottom: 1.35rem;
  left: 50%;
  transform: translateX(-50%);
}
.btn a {
  margin: auto 1.35rem;
}

label {
  position: relative;
  margin: 0.675rem 1.35rem;
  display: flex;
  width: auto;
  align-items: center;
  cursor: pointer;
}

.check {
  margin-right: 7px;
  width: 1.35rem;
  height: 1.35rem;
}
.check #border {
  fill: none;
  stroke: #7a7a8c;
  stroke-width: 3;
  stroke-linecap: round;
}
.check #dot {
  fill: url(#gradient);
  transform: scale(0);
  transform-origin: 50% 50%;
}

input {
  display: none;
}
input:checked + label {
  background: linear-gradient(180deg, #ff8a00, #da1b60);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
input:checked + label svg #border {
  stroke: url(#gradient);
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  animation: checked 500ms ease forwards;
}
input:checked + label svg #dot {
  transform: scale(1);
  transition: transform 500ms cubic-bezier(0.57, 0.21, 0.69, 3.25);
}

@keyframes checked {
  to {
    stroke-dashoffset: 0;
  }
}

JavaScript

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