Design Smiley Face Eyes that follow Mouse Cursor using CSS and JS

26 Apr, 2021
An animated face by using HTML and CSS and JavaScript. Where the face will follow the cursor. It is one of the simple CSS and JavaScript effects. For a beginner, it is one of the best examples to learn the concept of pseudo-elements.
Approach: The Basic idea of a face is comes from CSS.Here the whole animation will be made by CSS and a little bit of Javascript. Mainly by using CSS, we will make the cartoon face and by Javascript, we will help to flow the eyeball of the face. The main idea is that the eyeballs of the faces will move towards the mouse pointer and when the mouse comes on the face it closes the mouth, other than it opens its mouth and smiles.
HTML code: Using HTML we will make the basic structure of the face. We will take some divs, and give them some class name as we can decorate it in future.
 
html
<div class="face">    <div class="eyes">        <div class="eye"></div>        <div class="eye"></div>    </div></div><div class="face">    <div class="eyes">        <div class="eye"></div>        <div class="eye"></div>    </div></div>
CSS Code: By using CSS we will define the area of the particular divs,then will add some CSS attribute like border-radius, background color to make the area like round and a face of cartoon. also, we must have to use some hover effect to make this faces more attractive and alive, like when the mouse pointer comes on the face it closes it’s mouth.
 
css
<style type="text/css">    * {        margin: 0;        padding: 0;        box-sizing: border-box;    }    body {        /* Here mainly the body background color,            height, width, position, size of fonts etc            fixed*/        display: flex;        justify-content: center;        align-items: center;        min-height: 100vh;        height: 100%;        width: 100%;        background-repeat: unset;        font-size: 50px;    }    /*In this part we will make the round shape        of the face,and the basic structure of face            like add some color of face,height,width etc*/    .face {        position: relative;        width: 200px;        height: 200px;        border-radius: 50%;        background: green;        display: flex;        justify-content: center;        align-items: center;    }    .face::before {        /*In this part we will make            the mouth of the face*/        content: "";        position: absolute;        top: 120px;        width: 150px;        height: 70px;        background: yellow;        border-bottom-left-radius: 70px;        border-bottom-right-radius: 70px;        transition: 0.5s;    }    .face:hover::before {        /*Here we will add the hover effects.            Like when the cursor will came on the mouth the            mouth will closed that means is radius            will be decreased*/        top: 120px;        width: 150px;        height: 20px;        background: yellow;        border-bottom-left-radius: 0px;        border-bottom-right-radius: 0px;    }    /*In this part we will make        the eyes of the face*/    .eyes {        position: relative;        top: -30px;        display: flex;    }    .eyes .eye {        position: relative;        width: 60px;        height: 60px;        display: block;        background: #fff;        margin: 0 15px;        border-radius: 50%;    }    .eyes .eye::before {        content: "";        position: absolute;        top: 50%;        left: 25%;        transform: translate(-50%, -50%);        width: 40px;        height: 40px;        background: #000;        border-radius: 50%;    }</style>
JavaScript: Here we also use a little bit of JavaScript as the eyeball can move towards the mouse pointer. First of all, we will create a function named eyeball. and then declare variables. In this code we have nothing to print, so we wouldn’t use document.write, But we have to rotate the eyeball, so we use the class name ‘eye’ to rotate and use style.transform function as “rotate(“+rot+”deg)”. And finally, our eye will be ready to move.
 
javascript
<script>    document.querySelector(      "body").addEventListener("mousemove", eyeball);    function eyeball() {        var eye = document.querySelectorAll(".eye");        eye.forEach(function (eye) {            let x =                eye.getBoundingClientRect().left +                eye.clientWidth / 2;                       let y =                eye.getBoundingClientRect().top +                eye.clientHeight / 2;            let radian =            Math.atan2(event.pageX - x, event.pageY - y);            let rot = radian * (180 / Math.PI) * -1 + 270;            eye.style.transform =              "rotate(" + rot + "deg)";        });    }</script>
Example: Here is the full code of HTML CSS and JavaScript
html
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <time></time>        <style type="text/css">            * {                margin: 0;                padding: 0;                box-sizing: border-box;            }            body {                /* Here mainly the body background color,            height, width, position, size of fonts etc            fixed*/                display: flex;                justify-content: center;                align-items: center;                min-height: 100vh;                height: 100%;                width: 100%;                background-repeat: unset;                font-size: 50px;            }            /*In this part we will make the round shape        of the face,and the basic structure of face            like add some color of face,height,width etc*/            .face {                position: relative;                width: 200px;                height: 200px;                border-radius: 50%;                background: green;                display: flex;                justify-content: center;                align-items: center;            }            .face::before {                /*In this part we will make            the mouth of the face*/                content: "";                position: absolute;                top: 120px;                width: 150px;                height: 70px;                background: yellow;                border-bottom-left-radius: 70px;                border-bottom-right-radius: 70px;                transition: 0.5s;            }            .face:hover::before {                /*Here we will add the hover effects.            Like when the cursor will came on the mouth the            mouth will closed that means is radius            will be decreased*/                top: 120px;                width: 150px;                height: 20px;                background: yellow;                border-bottom-left-radius: 0px;                border-bottom-right-radius: 0px;            }            /*In this part we will make        the eyes of the face*/            .eyes {                position: relative;                top: -30px;                display: flex;            }            .eyes .eye {                position: relative;                width: 60px;                height: 60px;                display: block;                background: #fff;                margin: 0 15px;                border-radius: 50%;            }            .eyes .eye::before {                content: "";                position: absolute;                top: 50%;                left: 25%;                transform: translate(-50%, -50%);                width: 40px;                height: 40px;                background: #000;                border-radius: 50%;            }        </style>    </head>    <body>        <!-- In this divs take separate classes named eye,            face which will help to make the animation,            because the whole animation will be            made by using css-->        <div class="face">            <div class="eyes">                <div class="eye"></div>                <div class="eye"></div>            </div>        </div>        <div class="face">            <div class="eyes">                <div class="eye"></div>                <div class="eye"></div>            </div>        </div>        <!-- Here the div ends.That            means the face part ends-->        <script>            document.querySelector(            "body").addEventListener("mousemove", eyeball);            function eyeball() {                var eye = document.querySelectorAll(".eye");                eye.forEach(function (eye) {                    let x =        eye.getBoundingClientRect().left + eye.clientWidth / 2;                    let y =        eye.getBoundingClientRect().top + eye.clientHeight / 2;                    let radian =                Math.atan2(event.pageX - x, event.pageY - y);                    let rot =            radian * (180 / Math.PI) * -1 + 270;                    eye.style.transform =                    "rotate(" + rot + "deg)";                });            }        </script>    </body></html>
Output:  
 
arorakashish0911
CSS-Misc
HTML-Misc
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.