-
-
Save sinanisler/201547bcdeb015f3531dcd20559c6273 to your computer and use it in GitHub Desktop.
Pure CSS3 Water Wave Text Animation Effects Using CSS Clip-path
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #000015; | |
| } | |
| h2 { | |
| position: absolute; | |
| top: 50%; | |
| transform: translate(calc(50vw - 50%), -55%); | |
| text-transform: uppercase; | |
| font-size: 9em; | |
| font-family: arial; | |
| } | |
| h2:nth-child(1) { | |
| color: transparent; | |
| -webkit-text-stroke: 1px rgb(135, 206, 235, 0.35); | |
| } | |
| h2:nth-child(2) { | |
| color: skyblue; | |
| animation: water 6s ease-in-out infinite; | |
| } | |
| @keyframes water { | |
| 0%, | |
| 100% { | |
| clip-path: polygon(0 47%, 8% 36%, 19% 27%, 31% 29%, 42% 45%, 48% 66%, 58% 79%, 76% 79%, 89% 75%, 100% 63%, 100% 100%, 0 100%); | |
| } | |
| 50% { | |
| clip-path: polygon(0 64%, 8% 76%, 19% 80%, 31% 78%, 42% 68%, 48% 46%, 58% 30%, 76% 28%, 89% 37%, 100% 48%, 100% 100%, 0 100%); | |
| } | |
| } | |
| footer { | |
| color: rgb(135, 206, 235, 0.35); | |
| position: absolute; | |
| bottom: 0; | |
| } | |
| footer a { | |
| text-decoration: none; | |
| color: rgb(135, 206, 235, 0.35); | |
| } | |
| footer a:hover { | |
| color: rgb(135, 206, 235); | |
| } | |
| @media screen and (max-width: 700px) { | |
| h2 { | |
| font-size: 5em; | |
| } | |
| } | |
| @media screen and (max-width: 600px) { | |
| h2 { | |
| font-size: 3em; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Water Wave Text Animation</title> | |
| <link rel="stylesheet" href="water.css"> | |
| </head> | |
| <body> | |
| <h2>❤ basant ❤</h2> | |
| <h2>❤ basant ❤</h2> | |
| <footer>Inspired from <a href="https://youtu.be/Tf6qm5JMUXQ" target="blank">this tutorial</a></footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment