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: 300px    height: 300px  }  .pin-leaf-checkbox, .pin-star-center {    width: 45px;    height: 50px;    position: absolute;    left: 0;    right: 0;    top: -60px;    bottom: 0;    margin: auto;    background-color: #fff;    border-radius: 50%;    cursor: pointer;    z-index: 999  }  .pin-star-center, .pin-star-leaf{    pointer-events: none;  }  .pin-star-center > input[type="checkbox"]{    width: 100%;    height: 100%;    cursor: pointer;  }  .pin-star-leaf {    width: 60px    height: 120px    background-color: #b8f0f5    border-radius: 50%/30% 30% 70% 70%    position: absolute    left: 0    right: 0    top: 0    bottom: 0    margin: auto    opacity: 0.5    transition: transform 1s cubic-bezier(.8,-.5,.2,1.4);    transform-origin: 30px 30px    &:nth-of-type(1) {      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 1s cubic-bezier(.8,-.5,.2,1.4);    }    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(5){      transform: rotatez(35deg);    }    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(4){      transform: rotatez(105deg);    }    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(3){      transform: rotatez(180deg);    }    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(2){      transform: rotatez(255deg);    }    .pin-leaf-checkbox:checked ~ .pin-star-leaf:nth-of-type(1){      transform: rotatez(325deg);    }</style>