CSS eyes

Developer
Loktar
Size
2,274 Kb
Views
46,552
  1. CSS eyes Previews
  2. CSS eyes HTML Codes
  3. CSS eyes CSS Codes

How do I make an css eyes?

Eyes that follow your cursor. He gets mad when you you make him cross eyed! I'm getting in the Halloween spirit a bit early this year.. What is a css eyes? How do you make a css eyes? This script and codes were developed by Loktar on 20 August 2022, Saturday.

CSS eyes Previews
IQ Test

CSS eyes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS eyes</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="hitarea"> <div id="a-1" class="hitbox"></div> <div id="a-2" class="hitbox"></div> <div id="a-3" class="hitbox"></div> <div id="a-4" class="hitbox"></div> <div id="a-5" class="hitbox"></div> <div id="b-1" class="hitbox"></div> <div id="b-2" class="hitbox"></div> <div id="b-3" class="hitbox"></div> <div id="b-4" class="hitbox"></div> <div id="b-5" class="hitbox"></div> <div id="c-1" class="hitbox"></div> <div id="c-2" class="hitbox"></div> <div id="c-3" class="hitbox"></div> <div id="c-4" class="hitbox"></div> <div id="c-5" class="hitbox"></div> <div id="d-1" class="hitbox"></div> <div id="d-2" class="hitbox"></div> <div id="d-3" class="hitbox"></div> <div id="d-4" class="hitbox"></div> <div id="d-5" class="hitbox"></div> <div id="e-1" class="hitbox"></div> <div id="e-2" class="hitbox"></div> <div id="e-3" class="hitbox"></div> <div id="e-4" class="hitbox"></div> <div id="e-5" class="hitbox"></div> <div class="eye"> <div class="pupil"></div> </div> <div class="eye"> <div class="pupil"></div> </div> <div class="eyelid"></div> <div class="eyelid"></div>
</div>
</body>
</html>

CSS eyes - Script Codes CSS Codes

body{background:#000;margin:0;}
#hitarea{ position:absolute; left:50%; margin-left:-250px; width:500px; height:500px;
}
.hitbox{ width:100px; height:100px; float:left;
}
/* eyes */
.eye{ position:absolute; width:100px; height:100px; background: #fff; border-radius:50px; left:25%; top: 40%; pointer-events: none;
}
.eye+.eye{ left: 55%;
}
.pupil{ position:relative; width:25px; height:25px; background:#000; border-radius:12px; left:50%; top:50%; margin:-12px 0 0 -12px; -webkit-transition: all .5s ease;
}
.eyelid{ width:150px; height: 100px; position:absolute; left:20%; top: 25%; pointer-events: none; background: #000; -webkit-animation-name: blink; -webkit-animation-duration: 4.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-direction: alternate; -webkit-animation-delay: 1s; -webkit-transition: all .5s ease;
}
.eyelid+.eyelid{ left: 50%;
}
/* Blinking eyes */
@-webkit-keyframes blink{ 0%{ top:25%; } 95%{ top:25%; } 100%{ top:40%; }
}
/* hover events */
/* eye lids */
.hitbox:hover ~ .eyelid{ -webkit-transform: rotate(-10deg);
}
.hitbox:hover ~ .eyelid:nth-of-type(2n+1){ -webkit-transform: rotate(10deg);
}
#c-3:hover ~ .eyelid{ -webkit-transform: rotate(15deg);
}
#c-3:hover ~ .eyelid:nth-of-type(2n+1) { -webkit-transform: rotate(-15deg);
}
/* pupils */
#a-1:hover ~ .eye > .pupil{ -webkit-transform: rotate(60deg) translate(-30px);
}
#a-2:hover ~ .eye > .pupil{ -webkit-transform: rotate(80deg) translate(-30px);
}
#a-3:hover ~ .eye > .pupil{ -webkit-transform: rotate(90deg) translate(-30px);
}
#a-4:hover ~ .eye > .pupil{ -webkit-transform: rotate(100deg) translate(-30px);
}
#a-5:hover ~ .eye > .pupil{ -webkit-transform: rotate(120deg) translate(-30px);
}
#b-1:hover ~ .eye > .pupil{ -webkit-transform: rotate(50deg) translate(-25px);
}
#b-2:hover ~ .eye > .pupil{ -webkit-transform: rotate(70deg) translate(-25px);
}
#b-3:hover ~ .eye > .pupil{ -webkit-transform: rotate(100deg) translate(-25px);
}
#b-3:hover ~ .eye:nth-of-type(2n+1) > .pupil { -webkit-transform: rotate(80deg) translate(-25px);
}
#b-4:hover ~ .eye > .pupil{ -webkit-transform: rotate(110deg) translate(-25px);
}
#b-5:hover ~ .eye > .pupil{ -webkit-transform: rotate(130deg) translate(-25px);
}
#c-1:hover ~ .eye > .pupil{ -webkit-transform: rotate(0deg) translate(-25px);
}
#c-2:hover ~ .eye > .pupil{ -webkit-transform: rotate(0deg) translate(-10px);
}
#c-3:hover ~ .eye > .pupil{ background: red; -webkit-transform: rotate(180deg) translate(-25px);
}
#c-3:hover ~ .eye:nth-of-type(2n+1) > .pupil { -webkit-transform: rotate(0deg) translate(-25px);
}
#c-4:hover ~ .eye > .pupil{ -webkit-transform: rotate(180deg) translate(-10px);
}
#c-5:hover ~ .eye > .pupil{ -webkit-transform: rotate(180deg) translate(-25px);
}
#d-1:hover ~ .eye > .pupil{ -webkit-transform: rotate(-40deg) translate(-25px);
}
#d-2:hover ~ .eye > .pupil{ -webkit-transform: rotate(-60deg) translate(-25px);
}
#d-3:hover ~ .eye > .pupil{ -webkit-transform: rotate(-120deg) translate(-25px);
}
#d-3:hover ~ .eye:nth-of-type(2n+1) > .pupil { -webkit-transform: rotate(-60deg) translate(-25px);
}
#d-4:hover ~ .eye > .pupil{ -webkit-transform: rotate(-130deg) translate(-25px);
}
#d-4:hover ~ .eye:nth-of-type(2n+1) > .pupil{ -webkit-transform: rotate(-100deg) translate(-25px);
}
#d-5:hover ~ .eye > .pupil{ -webkit-transform: rotate(-140deg) translate(-25px);
}
#e-1:hover ~ .eye > .pupil{ -webkit-transform: rotate(-40deg) translate(-30px);
}
#e-2:hover ~ .eye > .pupil{ -webkit-transform: rotate(-60deg) translate(-30px);
}
#e-3:hover ~ .eye > .pupil{ -webkit-transform: rotate(-120deg) translate(-30px);
}
#e-3:hover ~ .eye:nth-of-type(2n+1) > .pupil { -webkit-transform: rotate(-60deg) translate(-30px);
}
#e-4:hover ~ .eye > .pupil{ -webkit-transform: rotate(-130deg) translate(-30px);
}
#e-4:hover ~ .eye:nth-of-type(2n+1) > .pupil{ -webkit-transform: rotate(-100deg) translate(-30px);
}
#e-5:hover ~ .eye > .pupil{ -webkit-transform: rotate(-140deg) translate(-30px);
}
CSS eyes - Script Codes
CSS eyes - Script Codes
Home Page Home
Developer Loktar
Username loktar00
Uploaded August 20, 2022
Rating 4.5
Size 2,274 Kb
Views 46,552
Do you need developer help for CSS eyes?

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!

Loktar (loktar00) Script Codes
Name
Early Hacker
Bezier curve art
Circuit board pattern
Javascript 2d dynamic lighting
Meteor Shower
Tetris background
Scrolling Terrain and Shooting Stars
Part 1 platformer tutorial
Smoke Particles
Part 2 platformer tutorial
Create amazing SEO content 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!