Skip to content

Instantly share code, notes, and snippets.

@rasmusmerzin

rasmusmerzin/index.css

Created September 4, 2022 19:34
Show Gist options
  • Save rasmusmerzin/b42e41c8499aac5360d84385f21e4834 to your computer and use it in GitHub Desktop.
Save rasmusmerzin/b42e41c8499aac5360d84385f21e4834 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.css
@keyframes bg {
0% {
background-position: var(--x0) var(--y0);
}
33% {
background-position: var(--x1) var(--y1);
}
66% {
background-position: var(--x2) var(--y2);
}
100% {
background-position: var(--x0) var(--y0);
}
}
* {
user-select: none;
}
body {
--x0: 40%;
--y0: 10%;
--x1: 90%;
--y1: 70%;
--x2: 10%;
--y2: 90%;
animation: bg 30s ease-in-out infinite;
background-image: radial-gradient(#48f, #48f, #b6f, #f48, #f48);
background-size: 600vmax 600vmax;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 33vmin;
transition: 200ms;
filter: drop-shadow(1vmin 2vmin 1rem #0004);
}
img:hover {
filter: drop-shadow(1vmin 2vmin 1rem #0008);
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Merzin</title>
<link rel="icon" href="/index.svg" />
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<a href="https://merzin.dev"><img alt="Logo" src="/index.svg" /></a>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
index.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment