<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Dynamic smiley </title>
<style>
* {
Box-sizing:border-box;
}
. container {
width:400px;
min-height:400px;
Overflow:auto;
Display:block;
margin:0 Auto;
border-radius:200px;
}
. eyebox {
width:400px;
Display:block;
margin:0 Auto;
Text-align:center;
margin-top:100px;
margin-bottom:60px;
}
. Eye {
height:100px;
width:100px;
BORDER:4PX solid white;
border-radius:100%;
Display:inline-block;
Margin:0 20px;
position:relative;
padding:20px;
Overflow:hidden;
}
. Eye. Pupil {
height:25px;
width:25px;
border-radius:100%;
Display:inline-block;
Position:absolute;
Margin-left: -10px;
left:50px;
margin:10px;
}
. Smile {
height:100px;
width:200px;
border-radius:0 0 200px 200px;
Background: #ee3a4c;
margin:0 Auto;
Overflow:hidden;
Transition:all. 4s;
Transform-origin:center;
}
. smile:hover {
Transition:all. 4s;
height:33.33333px;
width:33.33333px;
border-radius:100%;
margin-top:120px;
}
. Smile:hover. Teeth {
Margin-left: -25px;
Margin-top: -40px;
Transition:all. 4s;
}
. Smile:hover. Tongue {
Transition:all. 4s;
Margin-left: -50px;
/*margin-top: $tongueDimensions *2;*/
}
. Smile. Teeth {
Transition:all. 4s;
height:33.33333px;
width:33.33333px;
margin-left:56.66667px;
position:relative;
}
. Smile. Teeth:after {
Content: "";
height:33.33333px;
width:33.33333px;
Position:absolute;
left:50px;
top:0;
z-index:10000;
}
. Smile. Tongue {
Transition:all. 4s;
height:100px;
width:100px;
border-radius:100%;
margin-top:40px;
margin-left:15px;
Display:inline-block;
position:relative;
}
. Smile. Tongue:after {
Content: ";
height:100px;
width:100px;
border-radius:100%;
Display:inline-block;
Position:absolute;
left:50px;
}
</style>
<script type= "Text/javascript" src= "Http://libs.baidu.com/jquery/1.10.2/jquery.min.js" ></script>
<script>
$ (function () {
var limitx = 50,
Limity = 50;
var containerw = $ ('. Container '). width ();
var Containerh = $ ('. Container '). Height ();
$ (". Container"). MouseMove (function (e) {
var mousey = Math.min (E.clienty/(CONTAINERH *.), limity);
var mousex = Math.min (E.clientx/(CONTAINERW *.), LIMITX);
$ ('. Pupil '). CSS (' top ', mousey);
$ ('. Pupil '). CSS (' left ', mousex);
Console.log (e.clienty + "+ e.clientx);
});
});
</script>
<body>
<div class= "Container" >
<div class= "Eyebox" >
<div class= "Eye EL" >
<div class= "Pupil" ></div>
</div>
<div class= "Eye ER" >
<div class= "Pupil" ></div>
</div>
</div>
<div class= "Smile" >
<div class= "Teeth" ></div>
<div class= "Tongue" ></div>
</div>
</div>
<div class= "Readout" ></div>
</div>
</body>
More wonderful code content, in QQ group 434623999
JavaScript class--mouse click to change the smiley face