.tank {
position: relative;
display: block;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
border-radius: 15px;
border: none;
width: 200px;
height: 100px;
}
.tank .water {
position: absolute;
top: -70px;
left: 0;
width: 100%;
height: 215px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0, 0, 0, .5);
transition: all .5s;
}
.tank .water:hover {
top: -115px;
}
.tank .water::after,
.tank .water::before {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 50%;
transform: translate(100px, 150px);
background: #fff;
}
.tank .water::before {
border-radius: 45%;
background: rgba(20, 20, 20, 1);
animation: water 5s linear infinite;
}
.tank .water::after {
border-radius: 40%;
background: rgba(20, 20, 20, .5);
animation: water 10s linear infinite;
}
@keyframes water {
0% {
transform: translate(-200px, -300px) rotate(0deg);
}
100% {
transform: translate(-200px, -300px) rotate(360deg);
}
}
span:target, span:target+.mw-headline {
background: rgba(66,31,255,0.2);
border-radius: .2em;
animation: bg-fade 1.3s ease-in .7s forwards;
}
@keyframes bg-fade {
to {
background: rgba(66,31,255,0);
}
}