.frame
.center
.checkbox
input(type="checkbox")#check.check
label(for="check")
.rays
- for(var i = 1; i <= 16; i++)
div.ray
View Compiled
$rays: 16;
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #ad5389;
background: linear-gradient(180deg, #3c1053, #ad5389);
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.checkbox {
width: 45px;
height: 45px;
.check {
position:absolute;
visibility:hidden;
opacity:0;
top:0;
left:0;
width:0.1px;
height: 0.1px;
& + label {
display:block;
width: 100%;
height: 100%;
border:2px solid #f0f0f0;
border-radius:50%;
box-sizing:border-box;
cursor:pointer;
z-index:10;
box-shadow:
inset 1px 2px 7px 2px rgba(#000,0.6),
4px 4px 4px 0px rgba(#333,0.4);
transition:all 0.7s ease;
}
&:checked {
& + label {
border-width:14px;
box-shadow:
4px 4px 4px 0px rgba(#333,0.4);
background:
linear-gradient(90deg, #da4453, #89216b);
animation: jelly .5s ease-in-out;
}
& ~ .rays {
width: 100%;
height: 100%;
position:absolute;
top: 11px;
left: 22px;
z-index: -1;
.ray {
width: 2px;
height: 20px;
background: #f0f0f0;
position:absolute;
}
@for $i from 1 through $rays {
$base : $i - 1;
$angle: (360 / $rays) * $base;
.ray:nth-child(#{$i}) {
transform: rotate($angle+deg)
translateY(140px);
animation: radiate#{$i} 0.5s ease;
opacity:0;
}
@keyframes radiate#{$i} {
from {
transform: rotate($angle+deg)
translateY(40px);
opacity: 1;
}
to {
transform: rotate($angle+deg)
translateY(140px);
opacity: 0;
}
}
}
}
}
}
}
@keyframes jelly {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1.5, 0.75)
}
35% {
transform: scale(0.75, 1.5);
}
50% {
transform: scale(1.25, 0.75)
}
65% {
transform: scale(0.75, 1.25)
}
75% {
transform: scale(1.25,0.75)
}
100% {
transform: scale(1, 1)
}
}
View Compiled
// jQuery v3.3.1 is supported
This Pen doesn't use any external CSS resources.