CSS eye follow

Developer

Size

2,592 Kb

Views

20,240

CSS eye follow Previews
CSS eye follow HTML Codes
CSS eye follow CSS Codes
CSS eye follow JS Codes

How do I make an css eye follow?

Just an eye that follow the cursor. Only CSS and only for fun. :). What is a css eye follow? How do you make a css eye follow? This script and codes were developed by Pedro Campos on 13 October 2022, Thursday.

CSS eye follow Previews

CSS eye follow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS eye follow</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="control-cnt">
<div class="control hover-1"></div>
<div class="control hover-2"></div>
<div class="control hover-3"></div>
<div class="control hover-4"></div>
<div class="control hover-5"></div>
<div class="control hover-6"></div>
<div class="control hover-7"></div>
<div class="control hover-8"></div>
<div class="control hover-9"></div>
<div class="control hover-10"></div>
<div class="control hover-11"></div>
<div class="control hover-12"></div>
<div class="control hover-13"></div>
<div class="control hover-14"></div>
<div class="control hover-15"></div>
<div class="control hover-16"></div>
<div class="control hover-17"></div>
<div class="control hover-18"></div>
<div class="control hover-19"></div>
<div class="control hover-20"></div>
<div class="control hover-21"></div>
<div class="control hover-22"></div>
<div class="control hover-23"></div>
<div class="control hover-24"></div>
<div class="control hover-25"></div>
<div class="eye"> <div class="eye-inside-cnt"> <div class="eye-inside"> <div class="eye-really-inside"></div> </div> </div>
</div>
<h1>Where are you little cursor?</h1>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS eye follow - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Titillium+Web:200";
body { margin: 0; }
/* control */
.control-cnt { position: relative; width: 100%; height: 600px; min-width: 310px; float: left; background-color: #45FF95;
}
.control { position: relative; width: 20%; height: 125px; float: left; z-index: 10;
}
/* eye */
.eye { position: relative; width: 300px; height: 300px; margin: 150px auto; background-color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
/* eye shadows */
.eye:before { position: absolute; display: block; content: ''; width: 310px; height: 150px; top: -10px; left: -5px; -webkit-border-radius: 150px 150px 0 0; -moz-border-radius: 150px 150px 0 0; border-radius: 150px 150px 0 0; border-top: 3px solid #39DB80;
}
.eye:after { position: absolute; display: block; content: ''; width: 304px; height: 150px; top: 156px; left: -2px; -webkit-border-radius: 0 0 150px 150px; -moz-border-radius: 0 0 150px 150px; border-radius: 0 0 150px 150px; border-bottom: 3px solid #3CED8B;
}
/* blue eye and shadow */
.eye-inside-cnt { position: absolute; width: 150px; height: 150px; margin: 75px;
}
.eye-inside { width: 150px; height: 150px; background-color: #09C; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden;
}
.eye-inside-cnt:before { position: absolute; display: block; content: ''; width: 156px; height: 156px; top: -4px; left: -4px; -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px; border: 2px solid #E7E7E7; border-right: none; border-bottom: none;
}
/* eye inside (black) */
.eye-really-inside { width: 100px; height: 100px; margin-top: 25px; margin-left: 25px; background-color: #000; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: 0.1s linear; -moz-transition: 0.1s linear; transition: 0.1s linear;
}
/* hovers to change eye-inside position */
/* line 1 */
.hover-1:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 0; }
.hover-2:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 12px; }
.hover-3:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 25px; }
.hover-4:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 37px; }
.hover-5:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 50px; }
/* line 2 */
.hover-6:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: -6px; }
.hover-7:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 12px; }
.hover-8:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 25px; }
.hover-9:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 37px; }
.hover-10:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 56px; }
/* line 3*/
.hover-11:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: -12px; }
.hover-12:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 6px; }
.hover-13:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 25px; }
.hover-14:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 43px; }
.hover-15:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 62px; }
/* line 4 */
.hover-16:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: -6px; }
.hover-17:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 12px; }
.hover-18:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 25px; }
.hover-19:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 37px; }
.hover-20:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 56px; }
/* line 5 */
.hover-21:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 0px; }
.hover-22:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 12px; }
.hover-23:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 25px; }
.hover-24:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 37px; }
.hover-25:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 50px; }
/* text */
h1 { font-family: 'Titillium Web', Arial, sans-serif; text-align: center; color: #45FF95;
}

CSS eye follow - Script Codes JS Codes

/* updated just do add the min-width to .control-cnt */

Home Page	Home
Developer	Pedro Campos
Username	pedrocampos
Uploaded	October 13, 2022
Rating	3.5
Size	2,592 Kb
Views	20,240

Do you need developer help for CSS eye follow?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pedro Campos (pedrocampos) Script Codes

Name	Size
Rotated text right	1,858 Kb
Mobile menu icon animations	2,576 Kb
Floating label on focus	2,261 Kb
WP8 start screen	7,592 Kb
Chekboxes CSS	3,747 Kb
Form checkbox	3,541 Kb
A Pen by Pedro Campos	1,671 Kb
Rows hover. Close popup.	2,211 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
A Pen by Oliver Schafeld	Schafeld	1,720 Kb
Search field	Jamesbarnett	2,100 Kb
CSS Patterns	Alyda	3,953 Kb
Modal Dialog	Gigaleet	2,251 Kb
Ball bouncing loading animation	Adam2326	3,144 Kb
Yuliya v krylova	Rafszul	37,351 Kb
Use the Twitchtv JSON API	Roksanaop	3,561 Kb
Scifi-style Radio-based Tab	Aaronchuo	4,427 Kb
Scrolling Horizontal Isotope	Bramus	2,017 Kb
Spinners using Font Icons	Keyamoon	3,007 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!