Shake Effect
A Pen by Dronca Raul on CodePen.
<h1>shake effect!</h1> |
A Pen by Dronca Raul on CodePen.
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); } | |
} | |