From 618af39b3ca9f77134ae727aa4c3434c56991357 Mon Sep 17 00:00:00 2001
From: OCG <40301816+ornitcg@users.noreply.github.com>
Date: Mon, 14 Oct 2024 13:54:48 +0300
Subject: [PATCH] Hacktoberfest2024 - eyes animation (#2739)
* rotating squares animation
* move eyes animation
* removed commented lines
---------
Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
---
Art/ornitcg-blink/index.html | 33 +++++++++++++++
Art/ornitcg-blink/meta.json | 4 ++
Art/ornitcg-blink/styles.css | 78 ++++++++++++++++++++++++++++++++++++
3 files changed, 115 insertions(+)
create mode 100644 Art/ornitcg-blink/index.html
create mode 100644 Art/ornitcg-blink/meta.json
create mode 100644 Art/ornitcg-blink/styles.css
diff --git a/Art/ornitcg-blink/index.html b/Art/ornitcg-blink/index.html
new file mode 100644
index 000000000..d77c94470
--- /dev/null
+++ b/Art/ornitcg-blink/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Art/ornitcg-blink/meta.json b/Art/ornitcg-blink/meta.json
new file mode 100644
index 000000000..001e8b5b7
--- /dev/null
+++ b/Art/ornitcg-blink/meta.json
@@ -0,0 +1,4 @@
+{
+ "artName": "blink",
+ "githubHandle": "ornitcg"
+}
\ No newline at end of file
diff --git a/Art/ornitcg-blink/styles.css b/Art/ornitcg-blink/styles.css
new file mode 100644
index 000000000..8854f3205
--- /dev/null
+++ b/Art/ornitcg-blink/styles.css
@@ -0,0 +1,78 @@
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ margin: 0;
+ background-color: black;
+ }
+
+
+.eye {
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 300px;
+ width: 300px;
+ background-color: white;
+ border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+
+}
+
+
+.pupil{
+ display: flex;
+ align-items: center;
+ margin-top: 50px;
+ margin-left: 0px;
+ height: 150px;
+ width: 150px;
+ background-color: black;
+ border-radius: 50%;
+ position: relative;
+ animation: lookdirection 5s infinite;
+
+
+}
+
+.shine {
+ height: 50px;
+ width: 50px;
+ background-color: white;
+ border-radius: 50%;
+ position: relative;
+ animation: moveshine 5s infinite;
+}
+
+
+@keyframes lookdirection{
+ 0% {
+ left: -20%;
+ }
+ 50% {
+ left: 30%;
+ }
+ 100% {
+ left: -20%;
+ }
+}
+
+
+@keyframes moveshine{
+ 0% {
+ left: 20%;
+ }
+ 50% {
+ left: 30%;
+ }
+ 100% {
+ left: 0%;
+ }
+}
+
+