- const DOLLS = 6
form.dolls
- let d = 0
while d < DOLLS
- if (d !== (DOLLS - 1))
input(id=`doll--${d}`, type='checkbox')
label.doll(for=`doll--${d}`, style=`${d === 0 ? 'display: block;' : ''}`)
span.doll__dummy
span.doll__half.doll__half--top Top
span.doll__half.doll__half--bottom Bottom
- d++
input(type="reset", id="reset")
label(for="reset") Reset
View Compiled
:root
--speed 0.25
--slide-distance 60
--base-width 100
--base-slide calc(var(--base-width) * 1)
@media(min-width 768px)
--base-width 300
body
align-items center
background #fafafa
display flex
justify-content center
min-height 100vh
transform-style preserve-3d
::selection
background transparent
form
position relative
height 200px
width 100px
label
display none
[type='checkbox']
[type='reset']
display none
[for='reset']
cursor pointer
display block
position fixed
top 1rem
right 1rem
.doll
color #fff
cursor pointer
height 200px
font-size 2rem
position absolute
text-align center
width 100px
&:nth-of-type(even)
--bg blue
--dummy-bg red
&:nth-of-type(odd)
--bg red
--dummy-bg blue
&__half
background var(--bg)
position absolute
width 100%
height 50%
left 0
&--top
top 0
&--bottom
bottom 0
&__dummy
background var(--dummy-bg)
height 100%
width 100%
position absolute
top 0
left 0
input:checked + label + input + label
input:checked + label + label
display block
input:checked + label
animation slideLeft calc(var(--speed) * 1s) forwards
pointer-events none
.doll__half--top
animation open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards
@keyframes slideLeft
to
transform translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0)
@keyframes open
0%
transform translate(0, 0)
{100 / 3%}
transform translate(0, -100%)
{100/ 3 * 2%}
transform translate(-100%, -100%)
100%
transform translate(-100%, 100%)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.