#Codevember 25, Interactive cat eye

Developer
Size
2,333 Kb
Views
12,144

How do I make an #codevember 25, interactive cat eye?

Just hover over it. What is a #codevember 25, interactive cat eye? How do you make a #codevember 25, interactive cat eye? This script and codes were developed by David Dietle on 24 September 2022, Saturday.

#Codevember 25, Interactive cat eye Previews

#Codevember 25, Interactive cat eye - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#Codevember 25, Interactive cat eye</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="outer cat"> <div id="upperlid"></div> <div class="eye"> <div class="iris"> <div class="pupil"></div> </div> </div> <div id="lowerlid"></div>
</div>
</body>
</html>

#Codevember 25, Interactive cat eye - Script Codes CSS Codes

body { padding: 0px; margin: 0px; background-color: black; text-align: center; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; animation: backglow 5s infinite;
}
.outer { height: 500px; width: 500px; position: relative; margin:30px auto; transform-style: preserve-3d; z-index: 10; border-radius: 50%; overflow:hidden; box-shadow: 0 0 30px chartreuse, 0 0 50px darkslategrey, inset 0 0 30px chartreuse;
}
.outer div { border-radius: 50%; position: absolute; pointer-events:none;
}
.eye { height: 100%; width: 100%; background-color: whitesmoke; box-shadow: inset 0 0 30px darkslategrey, 5px 5px 30px black; cursor: pointer;
}
.eye:after { width: 90%; height: 90%; content: ""; position: absolute; top: 0px; left: 0px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(233, 233, 255, 0.8), rgba(233, 233, 255, 0.8) 14%, rgba(233, 233, 255, 0) 24%); transform: translateX(-80px) translateY(-90px) skewX(-20deg); filter: blur(10px);
}
.iris { height: 100%; width: 100%; top: 0px; left: 0px; background-color: blue; box-shadow: inset 0 0 30px black; background-image: linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%), linear-gradient(0deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%), linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%), linear-gradient(22.5deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%), linear-gradient(67.5deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%), linear-gradient(112.5deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%), linear-gradient(157.5deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 47%,rgba(0,0,0,.1) 50%,rgba(0,0,0,0) 53%,rgba(10,8,0,0) 100%);
}
.iris:before { width: 50%; height: 50%; content: ""; position: absolute; top: 70%; left: 60%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%); transform: translateX(-80px) translateY(-90px) skewX(-20deg);
}
.pupil { height: 50%; width: 50%; top: 25%; left: 25%; background-color: black; box-shadow: 0 0 30px black; transition:animation .1s linear;
}
.cat .iris { background-color: chartreuse;
}
.cat .pupil{ height: 70%; width: 20%; top: 15%; left: 40%; animation:open .s linear; animation-fill-mode:forwards;
}
@keyframes open { 0% { width: 5%; left: 47.5%; } 100% { width: 20%; left: 40%; }
}
.outer:hover .pupil{ animation:shut .05s linear; animation-fill-mode:forwards;
}
@keyframes shut { 0% { width: 20%; left: 40%; } 100% { width: 5%; left: 47.5%; }
}
[id$='lid']{ height:51%; width:100%; background-color:black; position:absolute; left:0px; z-index:100000; box-shadow: 0 0 30px darkslategrey;
}
#upperlid{ top:-255px; animation:topopen .5s linear; animation-fill-mode:forwards;
}
#lowerlid{ bottom:-255px; animation:bottomopen .5s linear; animation-fill-mode:forwards;
}
.outer:hover #upperlid{ animation:topclose .2s linear; animation-fill-mode:forwards;
}
.outer:hover #lowerlid{ animation:bottomclose .2s linear; animation-fill-mode:forwards;
}
@keyframes topclose{ 0%{ } 100%{ top:0px; border-radius:0px; }
}
@keyframes bottomclose{ 0%{ } 50%{ border-radius:25%; } 100%{ bottom:0px; border-radius:0px; }
}
@keyframes topopen{ 0%{ top:0px; border-radius:0px; } 50%{ border-radius:25%; } 100%{ }
}
@keyframes bottomopen{ 0%{ bottom:0px; border-radius:0px; } 50%{ border-radius:25%; } 100%{ }
}
#Codevember 25, Interactive cat eye - Script Codes
#Codevember 25, Interactive cat eye - Script Codes
Home Page Home
Developer David Dietle
Username ddietle
Uploaded September 24, 2022
Rating 3.5
Size 2,333 Kb
Views 12,144
Do you need developer help for #Codevember 25, Interactive cat eye?

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!

David Dietle (ddietle) Script Codes
Create amazing video scripts 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!