div.g-btn
-for(var i=0; i<200; i++)
div.g-ball
View Compiled
$count: 200;
html, body{
height: 100%;
background: #000;
overflow: hidden;
filter: blur(2px) contrast(25);
}
.g-btn {
position: relative;
width: 200px;
height: 200px;
margin: 130px auto;
cursor: pointer;
// background: deeppink;
// border-radius: 48% 45% 48% 46%;
// animation: rotate 5s infinite linear;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
// background: linear-gradient(135deg, deeppink, red);
background: #dc8165;
border-radius: 48% 45% 48% 46%;
animation: rotate 5s infinite linear;
z-index: 0;
// opacity: .5;
}
&::after {
content: "Hover";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
line-height: 200px;
text-align: center;
color: #000;
font-size: 48px;
}
}
.g-ball {
position: absolute;
top: 50px;
transform: translate(0, 0);
background: #fa8763;
border-radius: 50%;
z-index: -1;
mix-blend-mode: screen;
}
@for $i from 0 to $count {
.g-ball:nth-child(#{$i}) {
$width: #{random(60)}px;
width: $width;
height: $width;
left: calc(#{(random(100))}px + 30px);
}
.g-btn:hover .g-ball:nth-child(#{$i}) {
animation: movetop .6s linear #{random(2000)/1000}s;
}
}
@keyframes movetop {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, -180px);
opacity: 0;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.