Nst krishna wave animation (#3279)

NSTKrishna · web-flow · commit bba2854b1c6a · 2025-10-31T21:00:46.000+01:00
* add movie icon

* add waves

* Delete Art/NSTKrishna-Animated-Movie-Icons/index.html

* Delete Art/NSTKrishna-Animated-Movie-Icons/meta.json

* Delete Art/NSTKrishna-Animated-Movie-Icons/styles.css
diff --git a/Art/NSTKrishna-Wave_animation/index.html b/Art/NSTKrishna-Wave_animation/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wave Animation</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="ocean">
+    <div class="wave wave1"></div>
+    <div class="wave wave2"></div>
+    <div class="wave wave3"></div>
+  </div>
+</body>
+</html>
diff --git a/Art/NSTKrishna-Wave_animation/meta.json b/Art/NSTKrishna-Wave_animation/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "waves",
+  "githubHandle": "NSTKrishna"
+}
diff --git a/Art/NSTKrishna-Wave_animation/styles.css b/Art/NSTKrishna-Wave_animation/styles.css
@@ -0,0 +1,41 @@
+body {
+  margin: 0;
+  background: linear-gradient(to top, #001, #004);
+  overflow: hidden;
+  height: 100vh;
+}
+
+.ocean {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+}
+
+.wave {
+  position: absolute;
+  bottom: 0;
+  width: 200%;
+  height: 100px;
+  border-radius: 50%;
+  background: rgba(0, 150, 255, 0.6);
+  animation: move 6s linear infinite;
+}
+
+.wave2 {
+  background: rgba(0, 100, 255, 0.4);
+  animation-duration: 9s;
+  bottom: 20px;
+}
+
+.wave3 {
+  background: rgba(0, 80, 255, 0.3);
+  animation-duration: 12s;
+  bottom: 40px;
+}
+
+@keyframes move {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "artName": "waves",
 +  "githubHandle": "NSTKrishna"
 +}