Related Articles

Related Articles

Design Smiley Face Eyes that follow Mouse Cursor using CSS and JS
  • Last Updated : 28 Oct, 2020

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.

Approch: 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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 cirser 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>

    chevron_right

    
    

  • 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.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

Example: Here is the full code of HTML CSS and JavaScript

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 cirser 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 animatetion 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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :