diff --git a/README.md b/README.md index 987dc62..8443dd1 100644 --- 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 new file mode 100644 index 0000000..e15a139 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + Animated Eyes Follow Mouse Cursor + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c872213 --- /dev/null +++ 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; +} \ No newline at end of file