Add Water Wave Text Animation using CSS

purna135 · purna135 · commit 1b6c6c7bcbaa · 2022-10-24T13:34:33.000+05:30
diff --git a/Css Animations/Water wave text animation/Water Wave Text Animation.gif b/Css Animations/Water wave text animation/Water Wave Text Animation.gif
diff --git a/Css Animations/Water wave text animation/index.html b/Css Animations/Water wave text animation/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Water Wave Text Animation</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+
+<body>
+  <div class="content">
+    <h2>WeBeginners</h2>
+    <h2>WeBeginners</h2>
+  </div>
+
+</body>
+
+</html>
diff --git a/Css Animations/Water wave text animation/style.css b/Css Animations/Water wave text animation/style.css
@@ -0,0 +1,51 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #000;
+}
+
+.content {
+    position: relative;
+}
+
+.content h2 {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    font-size: 8em;
+}
+
+.content h2:nth-child(1) {
+    color: transparent;
+    -webkit-text-stroke: 2px #03a9f4;
+}
+
+.content h2:nth-child(2) {
+    color: #03a9f4;
+    animation: animate 4s ease-in-out infinite;
+}
+
+@keyframes animate {
+    0%,
+    100% {
+        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
+    }
+    50% {
+        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
+    }
+}
+
+@media(max-width: 768px) {
+    .content h2 {
+        font-size: 3em;
+    }
+}
