<div id="pinStarWrapper">
<input type="checkbox" id="pinStarCenterChkBox">
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div class="pinStarLeaf"></div>
<div id="pinStarCenter"></div>
</div>
#pinStarWrapper {
width: 300px;
height: 300px;
position: relative;
margin: auto;
}
.pinStarLeaf {
width: 60px;
height: 120px;
position: absolute;
border-radius: 50%/30% 30% 70% 70%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
opacity: .5;
transform-origin: 30px 30px;
transition: transform 1s cubic-bezier(.8, .5, .2, 1.4);
}
.pinStarLeaf:nth-of-type(1) {
background-color: #B8F0F5;
}
.pinStarLeaf:nth-of-type(2) {
background-color: #9CF3DC;
}
.pinStarLeaf:nth-of-type(3) {
background-color: #94F3B0;
}
.pinStarLeaf:nth-of-type(4) {
background-color: #D2F8A1;
}
.pinStarLeaf:nth-of-type(5) {
background-color: #F3EDA2;
}
#pinStarCenter,
#pinStarCenterChkBox {
width: 45px;
height: 50px;
position: absolute;
left: 0;
right: 0;
top: -60px;
bottom: 0;
margin: auto;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
}
#pinStarCenter,
.pinStarLeaf {
pointer-events: none;
}
#pinStarCenter > input[type="checkbox"] {
width: 100%;
height: 100%;
cursor: pointer;
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf {
transition: transform 1s cubic-bezier(.8, -.5, .2, 1.4);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(5) {
transform: rotatez(35deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(4) {
transform: rotatez(105deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(3) {
transform: rotatez(180deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(2) {
transform: rotatez(255deg);
}
#pinStarCenterChkBox:checked ~ .pinStarLeaf:nth-of-type(1) {
transform: rotatez(325deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.