filippoerbisti · filippoerbisti · May 19, 2022 · May 19, 2022 · May 20, 2022 · May 20, 2022
diff --git a/README.md b/README.md
@@ -1,5 +1,3 @@
-# Some cool CSS effects
+# Animated Eyes Follow Mouse Cursor
 
-Check my branches and have fun!
-
-View [DEMOS](https://codepen.io/filippoerbisti) on Codepen.
+View and try [DEMO](https://codepen.io/filippoerbisti/pen/poawPqL) on Codepen.
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated Eyes Follow Mouse Cursor</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+</head>
+<body>
+    <div class="box">
+        <div class="eye"></div>
+        <div class="eye"></div>
+    </div>
+
+    <script>
+        document.body.addEventListener('mousemove', eyeball);
+
+        function eyeball() {
+            const eye = document.querySelectorAll('.eye');
+            eye.forEach(function (eye) {
+                let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
+                let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
+
+                let radian = Math.atan2(event.pageX - x, event.pageY - y);
+                let rotation = (radian * (180 / Math.PI) * -1) + 270;
+                let rot = rotation.toFixed(2);
+                eye.style.transform = "rotate("+rot+"deg)";
+            });
+        }
+    </script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,43 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    background: radial-gradient(#f2761e, #ef4921);
+}
+
+.box {
+    display: flex;
+}
+
+.box .eye {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    display: block;
+    background: #fff;
+    margin: 0 20px;
+    border-radius: 50%;
+    box-shadow: 0 5px 45px rgba(0, 0, 0, 0.2),
+    inset 0 0 15px #f2761e,
+    inset 0 0 25px #f2761e;
+}
+
+.box .eye::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 35px;
+    transform: translate(-50%, -50%);
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    background: #000;
+    border: 10px solid #2196f3;
+    box-sizing: border-box;
+}