Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html

Created Aug 27, 2018
Embed
What would you like to do?
Shake Effect
<h1>shake effect!</h1>
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Source Code Pro', monospace;
background: #000;
}
h1 {
position: relative;
text-transform: uppercase;
letter-spacing: 6px;
font-size: 10vw;
font-weight: 900;
text-decoration: none;
color: white;
display: inline-block;
background-size: 120% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
-ms-background-clip: text;
-ms-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
background-image: linear-gradient(45deg,
#7794ff,
#44107A,
#FF1361,
#FFF800);
animation: .8s shake infinite alternate;
}
@keyframes shake {
0% { transform: skewX(-15deg); }
5% { transform: skewX(15deg); }
10% { transform: skewX(-15deg); }
15% { transform: skewX(15deg); }
20% { transform: skewX(0deg); }
100% { transform: skewX(0deg); }
}
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:200,400,900" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.