Radio 单选按钮跳跃动画，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

            
            $wormDur: 0.4s
$radioDur: 0.2s
$timing1: cubic-bezier(0.45,0.05,0.55,0.95)
$timing2: cubic-bezier(0.5,0,0.5,2)
$radios: 3

*
  border: 0
  box-sizing: border-box
  margin: 0
  padding: 0

\:root
  font-size: calc(32px + (40 - 32)*(100vw - 320px)/ (1024 - 320))

body
  background: #e3e4e8
  color: #17181c
  display: flex
  font: 1em Hind, sans-serif
  height: 100vh
  line-height: 1.5
  padding: 1.5em 0

form
  display: block
  margin: auto
  max-width: 10em
  position: relative

input
  position: fixed
  top: -1.5em
  left: -1.5em

label
  $shadowColor: rgba(0,0,0,0.2)
  cursor: pointer
  display: block
  font-weight: bold
  text-shadow: 0 0.1em 0.1em $shadowColor
  transition: color $radioDur $timing1
  &:not(:last-of-type)
    margin-bottom: 1.5em
  span
    box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em $shadowColor, 0 0.3em 0.2em $shadowColor inset
    display: inline-block
    margin-right: 0.5em
    vertical-align: bottom
    width: 1.5em
    height: 1.5em
    transition: transform $radioDur $timing2, box-shadow $radioDur $timing1, color $radioDur $timing1

label span,
.worm__segment:before
  border-radius: 50%

input:checked + label,
input:checked + label span,
.worm__segment:before
  color: #255ff4

input:checked + label
  &, span
    transition-delay: $wormDur
  span
    transform: scale(1.2)

.worm
  top: 0.375em
  left: 0.375em
  &, &__segment
    position: absolute
  &__segment
    top: 0
    left: 0
    width: 0.75em
    height: 0.75em
    transition: transform $wormDur $timing1
    &:before
      animation-duration: $wormDur
      animation-timing-function: $timing1
      background: currentColor
      content: ""
      display: block
      width: 100%
      height: 100%
    &:first-child, &:last-child
      &:before
        box-shadow: 0 0 1em 0 currentColor

@for $s from 2 through 30
  $delay: $wormDur/100 * ($s - 1)
  .worm__segment:nth-child(#{$s})
    transition-delay: $delay
    &:before
      animation-delay: $delay

/* States */
@for $s from 1 through $radios
  input:nth-of-type(#{$s}):checked ~ .worm .worm__segment
    @if $s > 1
      transform: translateY(3em * ($s - 1))
    &:before
      animation-name: hop#{$s}

  @keyframes hop#{$s}
    from, to
      transform: translateX(0)
    50%
      transform: translateX(-1.5em)

/* Dark mode */
@media screen and (prefers-color-scheme: dark)
  body
    background: #17181c
    color: #e3e4e8
  
  input:checked + label,
  input:checked + label span, 
  .worm__segment:before
    color: #5583f6