MediaWiki:SnakeBorderBox.css

/*   Animated Snake Border Box CSS

@Source: https://www.youtube.com/watch?v=w0V4HAYYCbU @Example Page: w:c:monobunny:Animated Snake Border Box */

/* tag (1) */ div#snake-border-box { position: absolute; top: 50%; left: 50%;

padding: 30px;

color: #1670f0; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;

background: #0C002B;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); overflow: hidden; transform: translate(-50%, -50%); }

div#snake-border-box::before { content: ''; position: absolute; top: 2px; left: 2px; bottom: 2px;

width: 50%;

background: rgba(255, 255, 255, 0.05); }

/* tag (1) */ div#snake-border-box span:nth-child(1) { position: absolute; top: 0; left: 0;

width: 100%; height: 2px;

background: linear-gradient(to right, #0C002B, #1779FF);

animation: animate1 2s linear infinite; }

@keyframes animate1 { 0% {       transform: translateX(-100%); }

100% {       transform: translateX(100%); } }

/* tag (2) */ div#snake-border-box span:nth-child(2) { position: absolute; top: 0; right: 0;

width: 2px; height: 100%;

background: linear-gradient(to bottom, #0C002B, #1779FF);

animation: animate2 2s linear infinite; animation-delay: 1s; }

@keyframes animate2 { 0% {       transform: translateY(-100%); }

100% {       transform: translateY(100%); } }

/* tag (3) */ div#snake-border-box span:nth-child(3) { position: absolute; bottom: 0; left: 0;

width: 100%; height: 2px;

background: linear-gradient(to left, #0C002B, #1779FF);

animation: animate3 2s linear infinite; }

@keyframes animate3 { 0% {       transform: translateX(100%); }

100% {       transform: translateX(-100%); } }

/* tag (4) */ div#snake-border-box span:nth-child(4) { position: absolute; top: 0; left: 0;

width: 2px; height: 100%;

background: linear-gradient(to top, #0C002B, #1779FF);

animation: animate4 2s linear infinite; animation-delay: 1s; }

@keyframes animate4 { 0% {       transform: translateY(100%); }

100% {       transform: translateY(-100%); } }