Merge pull request #2845 from buzzcosm/buzzcosm-animation-2024

add 'neon_greetings' contribution to animation-nation
zero-to-mastery · Oct 28, 2024 · 79dd0ea · 79dd0ea
2 parents 8eef33e + 11e9c5b
commit 79dd0ea
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/Art/buzzcosm-neon_greetings/index.html b/Art/buzzcosm-neon_greetings/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wave Effect</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+  <div class="wave prevent-select">👋</div>
+</body>
+
+</html>
diff --git a/Art/buzzcosm-neon_greetings/meta.json b/Art/buzzcosm-neon_greetings/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "neon_greetings",
+  "githubHandle": "buzzcosm"
+}
diff --git a/Art/buzzcosm-neon_greetings/styles.css b/Art/buzzcosm-neon_greetings/styles.css
@@ -0,0 +1,39 @@
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #000;
+}
+
+.wave {
+  display: inline-block;
+  font-size: 80px;
+  animation: wave 1.5s infinite ease-in-out;
+  color: #fff;
+  text-shadow: 
+    0 0 10px #fff, 
+    0 0 20px #fff, 
+    0 0 30px #fff, 
+    0 0 40px #ff00de, 
+    0 0 70px #ff00de, 
+    0 0 80px #ff00de, 
+    0 0 100px #ff00de, 
+    0 0 150px #ff00de;
+}
+
+.prevent-select {
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+}
+
+@keyframes wave {
+  0%, 100% { transform: rotate(0deg); }
+  50% { transform: rotate(20deg); }
+}