Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>The title of the document</title> <style> body { background-color: #eee; } #example { width: 450px; margin: 250px auto; } h2 { text-align: center; color: #d9fff9; font-size: 80px; letter-spacing: 6px; font-weight: 300; margin: 0; line-height: 0; animation: glitch1 0.5s infinite; } h2:nth-child(2) { color: #0ef0e1; animation: glitch2 1.0s infinite; } h2:nth-child(3) { color: #ff94eb; animation: glitch3 1.0s infinite; } @keyframes glitch1 { 0% { transform: none; opacity: 1; } 50% { transform: skew(-2deg, 0.6deg); opacity: 0.75; } 100% { transform: none; opacity: 1; } } @keyframes glitch2 { 0% { transform: none; opacity: 0.25; } 50% { transform: translate(-3px, -1px); opacity: 0.5; } 100% { transform: none; opacity: 0.25; } } @keyframes glitch3 { 0% { transform: none; opacity: 0.25; } 50% { transform: translate(3px, 1px); opacity: 0.5; } 100% { transform: none; opacity: 0.25; } } </style> </head> <body> <div id="example"> <h2>W3DOCS</h2> <h2>W3DOCS</h2> <h2>W3DOCS</h2> </div> </body> </html>