<a>
<div class="parent">
<div class="elements">
<div class="el el1">
<div class="i"></div>
<div class="ib"></div>
<div class="dot"></div>
<div class="n">
<div class="n bar"></div>
<div class="n bigger"></div>
<div class="n smaller"></div>
</div>
</div>
<div class="el el2">
<div class="i"></div>
<div class="ib"></div>
<div class="dot"></div>
<div class="n">
<div class="n bar"></div>
<div class="n bigger"></div>
<div class="n smaller"></div>
</div>
</div>
</div>
</div></a>
body {
background: #fff;
-webkit-transform: rotateX(0.003deg);
transform: rotateX(0.003deg);
height: 100vh;
}
.parent {
background: #262626;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 256px;
height: 256px;
border-radius: 8px;
overflow: hidden;
transition: 0.2s;
}
a {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 256px;
height: 256px;
}
.elements {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
pointer-events: none;
}
.el {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-webkit-transform-origin: 15% 15%;
transform-origin: 15% 15%;
}
.el2 {
top: 150%;
}
a:hover .parent {
-webkit-transform: translate(-50%, -50%) scale(0.9);
transform: translate(-50%, -50%) scale(0.9);
}
a:hover .elements {
-webkit-animation: elem 4s infinite;
animation: elem 4s infinite;
}
a:hover .el1 {
-webkit-animation: el1 4s infinite;
animation: el1 4s infinite;
}
.dot {
background: #fff;
width: 15%;
height: 15%;
border-radius: 50%;
position: absolute;
left: 20%;
top: 23%;
-webkit-transform: translate(-20%, -23%);
transform: translate(-20%, -23%);
}
.i,
.bar {
background: #fff;
width: 14%;
height: 43%;
}
.i {
position: absolute;
left: 20%;
top: 70%;
-webkit-transform: translate(-20%, -70%);
transform: translate(-20%, -70%);
}
.n.bar {
position: absolute;
left: 47%;
top: 70%;
-webkit-transform: translate(-47%, -70%);
transform: translate(-47%, -70%);
}
.n.bigger {
background: #fff;
width: 33%;
height: 43%;
position: absolute;
left: 75%;
top: 70%;
-webkit-transform: translate(-75%, -70%);
transform: translate(-75%, -70%);
border-top-left-radius: 60% 40%;
border-top-right-radius: 50% 40%;
}
.n.smaller {
background: #262626;
width: 15%;
height: 33%;
position: absolute;
left: 65%;
top: 75%;
-webkit-transform: translate(-65%, -75%);
transform: translate(-65%, -75%);
border-top-left-radius: 50% 30%;
border-top-right-radius: 50% 30%;
}
@-webkit-keyframes elem {
0% { top: 50%; }
23.999999% { top: -50%; }
24% { top: 50%; }
46% { top: -50%; }
69% { top: 50%; }
}
@keyframes elem {
0% { top: 50%; }
23.999999% { top: -50%; }
24% { top: 50%; }
46% { top: -50%; }
69% { top: 50%; }
}
@-webkit-keyframes el1 {
69% { -webkit-transform: scale(1) translate(-50%, -50%);
transform: scale(1) translate(-50%, -50%); }
73% {-webkit-transform: scale(0.9) translate(-50%, -50%);
transform: scale(0.9) translate(-50%, -50%);
opacity: 1;}
90% {-webkit-transform: scale(5) translate(-50%, -50%);
transform: scale(5) translate(-50%, -50%);
opacity: 0;}
90.000001% {-webkit-transform: scale(0.8) translate(-50%, -50%);
transform: scale(0.8) translate(-50%, -50%);
opacity: 0;}
100% {opacity: 1;}
}
@keyframes el1 {
69% {-webkit-transform: scale(1) translate(-50%, -50%);
transform: scale(1) translate(-50%, -50%);}
73% {-webkit-transform: scale(0.9) translate(-50%, -50%);
transform: scale(0.9) translate(-50%, -50%);
opacity: 1;}
90% {-webkit-transform: scale(5) translate(-50%, -50%);
transform: scale(5) translate(-50%, -50%);
opacity: 0;}
90.000001% {-webkit-transform: scale(0.8) translate(-50%, -50%);
transform: scale(0.8) translate(-50%, -50%);
opacity: 0;}
100% {opacity: 1;}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.