Skip to content

Instantly share code, notes, and snippets.

@i-havr

i-havr/index.css

Last active July 11, 2023 17:39
Show Gist options
  • Save i-havr/ce397d984c66f8505d2e77ced3b50351 to your computer and use it in GitHub Desktop.
Save i-havr/ce397d984c66f8505d2e77ced3b50351 to your computer and use it in GitHub Desktop.
Download ZIP
Create a cool animated avatar for your portfolio (only CSS).
Raw
index.css
img {
--s: 300px; /* image size */
--b: 6px; /* border thickness */
--c: #ae3ec9; /* border color */
--cb: #e9ecef; /* background color */
--f: 1; /* initial scale */
width: var(--s);
aspect-ratio: 1;
padding-top: calc(var(--s) / 5);
cursor: pointer;
border-radius: 0 0 999px 999px;
--_g: 50% / calc(100% / var(--f)) 100% no-repeat content-box;
--_o: calc((1 / var(--f) - 1) * var(--s) / 2 - var(--b));
outline: var(--b) solid var(--c);
outline-offset: var(--_o);
background: radial-gradient(
circle closest-side,
var(--cb) calc(99% - var(--b)),
var(--c) calc(100% - var(--b)) 99%,
#0000
)
var(--_g);
-webkit-mask: linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) /
calc(100% / var(--f) - 2 * var(--b) - 2px) 50%,
radial-gradient(circle closest-side, #000 99%, #0000) var(--_g);
transform: scale(var(--f));
transition: 0.5s;
}
img:hover {
--f: 1.4; /* hover scale */
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
grid-auto-flow: column;
gap: 30px;
background: #e0e4cc;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated avatar</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<img src="./assets/images/400x400_ava.png" alt="Your good name" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment