label Me: Jump!
label(id='box') Box: But, how high?
input(id='jump',type='radio', name='height', value='1', checked)
input(id='higher', type='radio', name='height', value='2')
input(id='highest', type='radio', name='height', value='3')
label(for='jump') Me: Just jump!
label(for='higher') Me: Higher!
label(for='highest') Me: A little higher!
.ground
  .jump
View Compiled
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap')
body
  display flex
  min-height 100vh
  align-items center
  justify-content center
  flex-direction column
  font-family 'Roboto', sans-serif
  font-size 1.25rem
  padding 1.25rem

#box
  margin-bottom 2rem
  
input
  display none
  
label[for]
  cursor pointer
  
.jump
  --size 50
  --height 1
  --squished calc(1 + (2 * (var(--height) / 10)))
  --extended calc(1 - (2 * (var(--height) / 10)))
  height calc(var(--size) * 1px)
  width calc(var(--size) * 1px)
  background radial-gradient(circle at 10% 10%, hsl(25, 100%, 70%), hsl(25, 100%, 40%))
  transform-origin bottom center
  animation jump 1s infinite ease
  
  
.ground
  height 300px
  width 200px
  top 50%
  left 50%
  border-bottom 2px solid grey
  display flex
  justify-content center
  align-items flex-end
      
@keyframes jump
  0%, 100%
    transform translate(0, 0) scale(var(--squished), var(--extended))
  25%, 75%
    transform translate(0, 0) scale(1, 1)
  50%
    transform translate(0, calc(var(--height) * -100%)) scale(var(--extended), var(--squished))

#jump:checked ~ .ground .jump
  --height 1
  
#higher:checked ~ .ground .jump
  --height 2
  
#highest:checked ~ .ground .jump
  --height 3
  
#jump:checked ~ [for='jump'],
#higher:checked ~ [for='higher'],
#highest:checked ~ [for='highest']
  background hsl(24,100%, 75)
  
label[for]:hover
  background hsl(24, 100%, 85)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.