Skip to content

Instantly share code, notes, and snippets.

@f3lan

f3lan/index.html

Last active November 21, 2019 09:15
Show Gist options
  • Save f3lan/50f61aead258ea6affabe5e761c50e13 to your computer and use it in GitHub Desktop.
Save f3lan/50f61aead258ea6affabe5e761c50e13 to your computer and use it in GitHub Desktop.
Download ZIP
Loading Animation
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<aside>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 297.6 297.6" style="enable-background:new 0 0 297.6 297.6;" xml:space="preserve">
<g>
<path class="big" fill="#000" d="M90.4,51.7v141.7h116.4V51.7H90.4z M148.9,58.4V87l-46-28.6H148.9z M117.9,99.5h-1.1c-0.7,0-1.2,0.4-1.2,1.4l0,86H97V63.2 l55.7,34.5c0.4,0.2,0.7,0.5,1.2,0.5h1.1c0.8,0,1.2-0.4,1.2-1.3V58.4l0,0v0h18.5v76.6l0,0l0,0l-55.5-35 C118.7,99.7,118.4,99.5,117.9,99.5z M148.1,186.8l0-28.6l45.9,28.6H148.1z M200.1,182.1l-55.8-34.6c-0.4-0.2-0.7-0.5-1.2-0.5h-1.1 c-0.8,0-1.2,0.4-1.2,1.3l0,5l0,33.5h0h-18l0-76.2l55.5,35c0.4,0.2,0.7,0.5,1.2,0.5h1.1c0.8,0,1.2-0.4,1.2-1.4V58.4h0v0h18.3V182.1z "/>
</g>
<g>
<path class="letter" fill="#000000" d="M90.4,208.9c0-0.5,0.5-0.9,1-0.9h1.3l21.9,23.3h0.1v-21.8c0-0.5,0.4-1,1-1h4.9c0.5,0,1,0.5,1,1V245c0,0.5-0.5,0.9-1,0.9 h-1.3l-22.1-24.2h-0.1v22.7c0,0.5-0.4,1-1,1h-4.8c-0.5,0-1-0.5-1-1V208.9z"/>
<path class="letter" fill="#000000" d="M134.2,209.4c0-0.5,0.5-1,1-1h4.9c0.5,0,1,0.5,1,1v34.9c0,0.5-0.5,1-1,1h-4.9c-0.5,0-1-0.5-1-1V209.4z"/>
<path class="letter" fill="#000000" d="M153.7,209.4c0-0.5,0.4-1,1-1h4.9c0.5,0,1,0.5,1,1V239H174c0.6,0,1,0.5,1,1v4.3c0,0.5-0.4,1-1,1h-19.3c-0.6,0-1-0.5-1-1 V209.4z"/>
<path class="letter" fill="#000000" d="M183.2,209.4c0-0.5,0.4-1,1-1h21.5c0.6,0,1,0.5,1,1v4.3c0,0.5-0.4,1-1,1h-15.6v8.7h13c0.5,0,1,0.5,1,1v4.4 c0,0.6-0.5,1-1,1h-13v9.2h15.6c0.6,0,1,0.5,1,1v4.3c0,0.5-0.4,1-1,1h-21.5c-0.6,0-1-0.5-1-1V209.4z"/>
</g>
</svg>
</div>
</aside>
</body>
</html>
Raw
style.css
aside {
width: 25%;
min-width: 250px;
max-width: 500px;
margin: 25px auto;
}
.letter {
animation: kaboom 200ms ease alternate infinite;
}
.letter:nth-child(2) {
animation-delay: 0.1s;
}
.letter:nth-child(3) {
animation-delay: 0.2s;
}
.letter:nth-child(4) {
animation-delay: 0.3s;
}
@keyframes kaboom {
10% {
transform: scale(1.0);
}
100% {
transform: scale(1.1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment