css3 花瓣按鈕

<template>
  <div class="pin-star">
    <input type="checkbox" class="pin-leaf-checkbox">
    <div class="pin-star-leaf">
    </div>
    <div class="pin-star-leaf">
    </div>
    <div class="pin-star-leaf">
    </div>
    <div class="pin-star-leaf">
    </div>
    <div class="pin-star-leaf">
    </div>
    <div class="pin-star-center">
    </div>
  </div>
</template>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .pin-star{
    position: relative
    width: px
    height: px
  }
  .pin-leaf-checkbox, .pin-star-center {
    width: px;
    height: px;
    position: absolute;
    left: ;
    right: ;
    top: -px;
    bottom: ;
    margin: auto;
    background-color: #fff;
    border-radius: %;
    cursor: pointer;
    z-index: 
  }
  .pin-star-center, .pin-star-leaf{
    pointer-events: none;
  }

  .pin-star-center > input[type="checkbox"]{
    width: %;
    height: %;
    cursor: pointer;
  }
  .pin-star-leaf {
    width: px
    height: px
    background-color: #b8f0f5
    border-radius: %/% % % %
    position: absolute
    left: 
    right: 
    top: 
    bottom: 
    margin: auto
    opacity: 
    transition: transform s cubic-bezier(.,-.,.,);
    transform-origin: px px
    &:nth-of-type() {
      background-color: #B8F0F5
    }
    &:nth-of-type(2) {
      background-color: #9CF3DC
    }
    &:nth-of-type(3) {
      background-color: #94F3B0
    }
    &:nth-of-type(4) {
      background-color: #C2F8A1
    }
    &:nth-of-type(5) {
      background-color: #FFEFAF
    }
  }
    .pin-leaf-checkbox:checked ~ .pin-star-leaf{
      transition: transform s cubic-bezier(.,-.,.,);
    }
    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(5){
      transform: rotatez(deg);
    }
    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(4){
      transform: rotatez(deg);
    }
    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(3){
      transform: rotatez(deg);
    }
    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(2){
      transform: rotatez(deg);
    }
    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(1){
      transform: rotatez(deg);
    }
</style>