Skip to content

Instantly share code, notes, and snippets.

@sampoder
Last active June 19, 2020 04:35
Show Gist options
  • Save sampoder/847bc8793e5eea52b6882438927ef7e8 to your computer and use it in GitHub Desktop.
Save sampoder/847bc8793e5eea52b6882438927ef7e8 to your computer and use it in GitHub Desktop.
body{
background-color:black;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.header-title-avatar{
box-shadow:
0 0 2px #fff,
0 0 4px #fff,
0 0 6px #fff,
0 0 8px #0ff,
0 0 10px #0ff,
0 0 12px #0ff,
0 0 14px #0ff,
0 0 16px #0ff;
}
.header-title-avatar:hover{
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation: headShake 2s ease;
animation: headShake 2s ease ;
}
h1.header-title-name {
text-indent: 0 !important;
display: block;
line-height: initial !important;
margin-top: 0.2em;
margin-bottom: 0.67em;
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 30px #0ff,
0 0 50px #0ff,
0 0 70px #0ff,
0 0 90px #0ff,
0 0 100px #0ff;
font-weight: 400;
color:white;
}
body {
background-color: #010a00;
background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
h1.header-title-name {
text-indent: -9999px;
line-height: 0;
animation: blinker 5s ease infinite;
}
.posts{
box-shadow:
0 0 2px #fff,
0 0 4px #fff,
0 0 6px #fff,
0 0 8px #0ff,
0 0 10px #0ff,
0 0 12px #0ff,
0 0 14px #0ff,
0 0 16px #0ff;
}
.post:hover{
-webkit-animation: heartBeat 2s ease;
animation: heartBeat 2s ease;
}
.posts:hover{
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073;
}
@-webkit-keyframes glow-text {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
@keyframes blinker {
0% {
opacity: 0;
}
25% {
opacity: 70;
}
50% {
opacity: 100;
}
75% {
opacity: 70;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment