.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); } }