纯CSS单选按钮选择的顺时针圆形填充动画

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

使用码上掘金查看实时效果

逻辑

API

这边我们需要先对一些重要的CSS属性有一些基本的了解，我列出了对应的属性和参数的文档地址

transition

**transition **CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

CSS

html, body
  height: 100%
  display: grid

body
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif
  font-weight: 400
  -webkit-font-smoothing: antialiased
  color: #222

.cntr
  margin: auto

.btn-radio
  cursor: pointer
  display: inline-block
  float: left
  -webkit-user-select: none
  user-select: none
  &:not(:first-child)
    margin-left: 20px
  @media screen and (max-width: 480px)
    display: block
    float: none
    &:not(:first-child)
      margin-left: 0
      margin-top: 15px
  svg
    fill: none
    vertical-align: middle
    circle
      stroke-width: 2
      stroke: #C8CCD4
    path
      stroke: #008FFF
      &.inner
        stroke-width: 6
        stroke-dasharray: 19
        stroke-dashoffset: 19
      &.outer
        stroke-width: 2
        stroke-dasharray: 57
        stroke-dashoffset: 57
  input
    display: none
    &:checked + svg
      path
        transition: all .4s ease
        &.inner
          stroke-dashoffset: 38
          transition-delay: .3s
        &.outer
          stroke-dashoffset: 0
  span
    display: inline-block
    vertical-align: middle

主要的CSS样式内容，在切换Radio Button按钮样式会切换，主要改变的是以下这个样式

    &:checked + svg
      path
        transition: all .4s ease
        &.inner
          stroke-dashoffset: 38
          transition-delay: .3s
        &.outer
          stroke-dashoffset: 0

改变了svg的填充方式