Решение:
Добавьте ниже CSS
Может быть дополнительно оптимизировано, если хотите.
.eye{overflow: hidden;}
.shut {
height: 200px;
}
.shut span {
height: 29%;
border-radius: 50% 50% 50% 50%;
}
<!DOCTYPE html>
<!-- saved from url=(0058)http://jasonbuckboyer.com/playground/eyes/demo.html#step-5 -->
<html lang="en-US"><link type="text/css" id="dark-mode" rel="stylesheet" href="http://jasonbuckboyer.com/playground/eyes/demo.html"><style type="text/css" id="dark-mode-custom-style"></style><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Eyes Following Mouse</title>
<meta name="description" content="CSS3 3d test to create eyeball spheres that follow your mouse">
<style>
/* Base */
* { margin:0; padding:0; }
html, body { height:100%; }
body { background-color:#34312c; text-align:center; }
body:before { content:''; float:left; height:50%; margin-bottom:-100px; }
.centered { display:inline-block; vertical-align:middle; }
.centered:before { content:''; display:inline-block; height:100%; vertical-align:middle; }
.intro { -webkit-animation:instructions 7s linear 0 1; animation:instructions 7s linear 0 1; background:#111; color:#ddd; font-size:18px; left:0; line-height:0; opacity:0; overflow:hidden; padding:0; position:absolute; right:0; top:0; z-index:1; }
a { color:#fff; cursor:pointer; }
a:visited { color:#7eeded; cursor:pointer; }
@-webkit-keyframes instructions {
0%,
90% { opacity:1; line-height:1.5; padding:8px; }
100% { opacity:0; line-height:0; padding:0; }
}
@keyframes instructions {
0%,
90% { opacity:1; line-height:1.5; padding:8px; }
100% { opacity:0; line-height:0; padding:0; }
}
/* Eyes */
.eyes { clear:both; }
.eye { background-color:#fff; border-radius:100px; box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset 0 0 20px rgba(10, 10, 100, .4), 0 0 40px rgba(0, 0, 0, .8); height:200px; margin:0 30px; position:relative; width:200px; }
.iris { background-color:#51b2d5; border-radius:40px; box-shadow:inset 0 0 18px rgba(0, 0, 0, .5), inset 0 0 30px #1b4e6d; height:80px; opacity:.9; width:80px; }
.pupil { background:linear-gradient(45deg, #333, #000); border-radius:20px; box-shadow:inset 0 0 8px rgba(0, 0, 0, .8); height:40px; width:40px; }
.eye,
.iris,
.pupil { -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-perspective:1000; perspective:1000; -webkit-transition:-webkit-transform .3s ease-out, box-shadow .3s ease-out; transition:transform .3s ease-out, box-shadow .3s ease-out; }
/* #1 Top Left */
.step-1:hover ~ .eyes .eye { box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset -15px -15px 30px rgba(10, 10, 100, .4), 6px 6px 40px rgba(0, 0, 0, .8); }
.step-1:hover ~ .eyes .iris {
box-shadow:inset 4px 4px 18px rgba(0, 0, 0, .5), inset -12px -12px 30px #1b4e6d;
-webkit-transform:translateX(-38px) translateY(-30px) skewX(-15deg) skewY(10deg) scale(0.95);
transform:translateX(-38px) translateY(-30px) skewX(-15deg) skewY(10deg) scale(0.95);
}
.step-1:hover ~ .eyes .pupil {
-webkit-transform:translateX(-3px) translateY(-3px) skewX(-4deg) skewY(4deg) scale(0.95);
transform:translateX(-3px) translateY(-3px) skewX(-4deg) skewY(4deg) scale(0.95);
}
/* #2 Top Center */
.step-2:hover ~ .eyes .eye { box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset 0 -15px 30px rgba(10, 10, 100, .4), 0 6px 40px rgba(0, 0, 0, .8); }
.step-2:hover ~ .eyes .iris {
box-shadow:inset 0 4px 18px rgba(0, 0, 0, .5), inset 0 -12px 30px #1b4e6d;
-webkit-transform:translateY(-45px) rotateX(15deg) scale(0.97);
transform:translateY(-45px) rotateX(15deg) scale(0.97);
}
.step-2:hover ~ .eyes .pupil {
-webkit-transform:translateY(-2px) rotateX(10deg) scale(0.95);
transform:translateY(-2px) rotateX(10deg) scale(0.95);
}
/* #3 Top Right */
.step-3:hover ~ .eyes .eye { box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset 15px -15px 30px rgba(10, 10, 100, .4), 6px 6px 40px rgba(0, 0, 0, .8); }
.step-3:hover ~ .eyes .iris {
box-shadow:inset -4px 4px 18px rgba(0, 0, 0, .5), inset 12px -12px 30px #1b4e6d;
-webkit-transform:translateX(38px) translateY(-30px) skewX(15deg) skewY(-10deg) scale(0.95);
transform:translateX(38px) translateY(-30px) skewX(15deg) skewY(-10deg) scale(0.95);
}
.step-3:hover ~ .eyes .pupil {
-webkit-transform:translateX(3px) translateY(-3px) skewX(4deg) skewY(-4deg) scale(0.95);
transform:translateX(3px) translateY(-3px) skewX(4deg) skewY(-4deg) scale(0.95);
}
/* #4 Center Left */
.step-4:hover ~ .eyes .eye,
.step-5:hover ~ .eyes .eye-right { box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset -15px 0 30px rgba(10, 10, 100, .4), 6px 0 40px rgba(0, 0, 0, .8); }
.step-4:hover ~ .eyes .iris,
.step-5:hover ~ .eyes .eye-right .iris {
box-shadow:inset 4px 0 18px rgba(0, 0, 0, .5), inset -12px 0 30px #1b4e6d;
-webkit-transform:translateX(-45px) rotateY(15deg) scale(0.97);
transform:translateX(-45px) rotateY(15deg) scale(0.98);
}
.step-4:hover ~ .eyes .pupil,
.step-5:hover ~ .eyes .eye-right .pupil {
-webkit-transform:translateX(-2px) rotateY(10deg) scale(0.95);
transform:translateX(-2px) rotateY(10deg) scale(0.95);
}
/* #6 Center Right */
.step-6:hover ~ .eyes .eye,
.step-5:hover ~ .eyes .eye-left {
box-shadow: inset 0 0 50px rgba(10, 10, 100, .4), inset 15px 0 30px rgba(10, 10, 100, .4), -6px 0 40px rgba(0, 0, 0, .8);
overflow: hidden;
}
.step-6:hover ~ .eyes .iris,
.step-5:hover ~ .eyes .eye-left .iris {
box-shadow:inset -4px 0 18px rgba(0, 0, 0, .5), inset 12px 0 30px #1b4e6d;
-webkit-transform:translateX(45px) rotateY(15deg) scale(0.97);
transform:translateX(45px) rotateY(15deg) scale(0.98);
}
.step-6:hover ~ .eyes .pupil,
.step-5:hover ~ .eyes .eye-left .pupil {
-webkit-transform:translateX(2px) rotateY(10deg) scale(0.95);
transform:translateX(2px) rotateY(10deg) scale(0.95);
}
/* #7 Bottom Left */
.step-7:hover ~ .eyes .eye { box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset -15px 15px 30px rgba(10, 10, 100, .4), 6px -6px 40px rgba(0, 0, 0, .8); }
.step-7:hover ~ .eyes .iris {
box-shadow:inset 4px -4px 18px rgba(0, 0, 0, .5), inset -12px 12px 30px #1b4e6d;
-webkit-transform:translateX(-38px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
transform:translateX(-38px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
}
.step-7:hover ~ .eyes .pupil {
-webkit-transform:translateX(-3px) translateY(3px) skewX(4deg) skewY(-4deg) scale(0.95);
transform:translateX(-3px) translateY(3px) skewX(4deg) skewY(-4deg) scale(0.95);
}
/* #8 Bottom Center */
.step-8:hover ~ .eyes .eye { box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset 0 15px 30px rgba(10, 10, 100, .4), 0 -6px 40px rgba(0, 0, 0, .8); }
.step-8:hover ~ .eyes .iris {
box-shadow:inset 0 -4px 18px rgba(0, 0, 0, .5), inset 0 12px 30px #1b4e6d;
-webkit-transform:translateY(45px) rotateX(15deg) scale(0.97);
transform:translateY(45px) rotateX(15deg) scale(0.97);
}
.step-8:hover ~ .eyes .pupil {
-webkit-transform:translateY(2px) rotateX(-10deg) scale(0.95);
transform:translateY(2px) rotateX(-10deg) scale(0.95);
}
/* #9 Bottom Right */
.step-9:hover ~ .eyes .eye { box-shadow:inset 0 0 50px rgba(10, 10, 100, .4), inset 15px 15px 30px rgba(10, 10, 100, .4), -6px -6px 40px rgba(0, 0, 0, .8); }
.step-9:hover ~ .eyes .iris {
box-shadow:inset -4px -4px 18px rgba(0, 0, 0, .5), inset 12px 12px 30px #1b4e6d;
-webkit-transform:translateX(38px) translateY(30px) skewX(-15deg) skewY(10deg) scale(0.95);
transform:translateX(38px) translateY(30px) skewX(-15deg) skewY(10deg) scale(0.95);
}
.step-9:hover ~ .eyes .pupil {
-webkit-transform:translateX(3px) translateY(3px) skewX(-4deg) skewY(4deg) scale(0.95);
transform:translateX(3px) translateY(3px) skewX(-4deg) skewY(4deg) scale(0.95);
}
/* Directional Steps */
.step { background-color:rgba(0, 0, 0, .2); box-shadow:inset 0 0 1px #000; cursor:default; opacity:0; position:fixed; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); }
.step-1,
.step-2,
.step-3 { top:0; bottom:calc(50% + 80px); }
.step-4,
.step-5,
.step-6 { top:calc(50% - 80px); bottom:calc(50% - 80px); }
.step-7,
.step-8,
.step-9 { top:calc(50% + 80px); bottom:0; }
@media only screen and (min-width:580px) {
.step-1,
.step-4,
.step-7 { left:0; right:calc(50% + 210px); }
.step-2,
.step-8 { left:calc(50% - 210px); right:calc(50% - 210px); }
.step-3,
.step-6,
.step-9 { left:calc(50% + 210px); right:0; }
.step-5 { left:calc(50% - 50px); width:100px; }
}
/* Mobile Tweaks */
@media only screen and (max-width:579px) {
.eye-right,
.step-5 { display:none; }
.step-1,
.step-4,
.step-7 { left:0; right:calc(50% + 80px); }
.step-2,
.step-8 { left:calc(50% - 80px); right:calc(50% - 80px); }
.step-3,
.step-6,
.step-9 { left:calc(50% + 80px); right:0; }
}
</style>
<style type="text/css">.vab_dialog {
font-family: 'Barlow', sans-serif;
position: fixed;
right: 0;
left: 0;
top: 15%;
margin: auto;
z-index: 2147483647;
border-radius: 4px;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-ms-flex-pack: start;
-webkit-box-pack: start;
justify-content: flex-start;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
max-width: 580px;
background-color: #ffffff;
-webkit-box-shadow: 0 0 22px 7px rgba(0, 0, 0, 0.78);
box-shadow: 0 0 22px 7px rgba(0, 0, 0, 0.78);
padding: 30px 0; }
.vab_dialog .vab_no_entry {
width: 40px;
height: 40px; }
.vab_dialog .are_you_sure {
font-size: 30px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #718191;
margin: 0 85px; }
.vab_dialog .detected {
margin: 30px 85px 0 85px;
font-size: 30px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #718191; }
.vab_dialog .do_you_want {
font-size: 21px;
font-weight: 600;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #718191;
margin: 40px 85px 0 85px; }
.vab_dialog .opt_out_msg {
margin: 20px 50px 0 50px;
font-size: 21px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #718191; }
.vab_dialog .vab_buttons {
margin-top: 50px;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center; }
.vab_dialog .vab_buttons .vab_button {
cursor: pointer;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
padding: 16px 24px;
border-radius: 5px;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center; }
.vab_dialog .vab_buttons .vab_button.cancel {
border: solid 1px #718191;
color: #718191;
margin-right: 20px; }
.vab_dialog .vab_buttons .vab_button.exit {
color: #f55a2e;
border: solid 1px #f55a2e;
margin-right: 20px; }
.vab_dialog .vab_buttons .vab_button.continue {
background-color: #8a95ff;
color: #ffffff; }
</style></head>
<body><panel class="drweb_select-panel" style="display: none;">
<div class="drweb_tool-panel">
<div class="drweb_tool-icon drweb_tool-icon_show" data-co="restore-btn" title="restore"></div>
<div class="drweb_tool-icon drweb_tool-icon_remove" data-co="remove-btn" title="remove"></div>
<div class="drweb_fit-btn" data-co="fit-btn" title=""></div>
</div>
<span data-co="label">Select the elements you want to hide on this page.</span>
<div class="drweb_btn" data-co="save">Save</div>
<div class="drweb_btn" data-co="cancel">Cancel</div>
<div class="drweb_panel-plug" data-co="plug" style="display: none"></div>
</panel>
<p class="intro">Move your mouse around or tap anywhere to make the eyes follow. Completely done only in HTML/CSS.</p>
<!-- STEPS -->
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-1" class="step step-1">Step-1</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-2" class="step step-2">Step-2</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-3" class="step step-3">Step-3</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-4" class="step step-4">Step-4</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-5" class="step step-5">Step-5</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-6" class="step step-6">Step-6</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-7" class="step step-7">Step-7</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-8" class="step step-8">Step-8</a>
<a href="http://jasonbuckboyer.com/playground/eyes/demo.html#step-9" class="step step-9">Step-9</a>
<!-- EYES -->
<figure class="eyes">
<div class="eye eye-left centered"><div class="shut">
<span>
<!-- hier geht das close eye-->
</span>
</div><div class="iris centered"><div class="pupil centered"></div></div></div>
<div class="eye eye-right centered"><div class="iris iris-45 centered"><div class="pupil centered"></div></div></div>
</figure>
<style>
.eye{overflow: hidden;}
.shut {
width: 100%;
height: 200px;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%) ;
z-index: 10;
}
.shut span {
display: block;
width: 100%;
height: 29%;
background: #ff6b6b;
border-radius: 50% 50% 50% 50%;
transition: 0.4s all;
}
.eye-left:hover > .shut span,
.eye-right:hover > .shut span {
height: 100%;
}
</style>
<!--[if IE]>
<style>.step, .eyes { display:none; }h1, p { color:#fff; padding:20px; }</style>
<h1>To better enjoy the internet, please <a href="https://www.google.com/intl/en/chrome/browser/">change your web browser</a>.</h1>
<p>Google Chrome offers the fastest, most secure web-browsing experience. Do yourself a favor and make the change today!</p>
<![endif]-->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30213263-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>