Tiger Bird Webdesign: Mouse With Moving Eyes With CSS Animation

Mouse With Moving Eyes With CSS Animation

Thinking about an animal easy to draw I came up with a mouse. A mouse is so easy: you just have to put several round shapes together, put dots in its face and here we have a mouse!

The head, the body, arms and legs, the mouth and eyes all parts are created with div elements. By using the CSS animation property you can move the eyes of the mouse. The left property values of the black dots with the id m_black_right_eye and m_black_left_eye are changed from 0px to 20px with the following syntax:

@keyframes eyemove {
from{left:0px;}
to{left:20px;}
}
The animation should go one forever so the value of the animation property is set to infinite.The black dots should go from left to right and vise versa with the value alternate.

Change the top and left value #mouse in the CSS code and position the mouse at will.

HTML and CSS Code

<html>
<head>
<style>
    #mouse{
    position:relative;
    top:100px;
    left:100px;
    height:100px;
    }
    
    #m_head{
    position:absolute;
    width:100px;
    height:100px;
    border:solid #D68533 2px;
    background-color:#FFB870;
    border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_left_ear{
    position:absolute;
    top:-45px;
    left:-40px;
    width:70px;
    height:70px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_right_ear{
    position:absolute;
    top:-45px;
    left:70px;
    width:70px;
    height:70px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_body{
    position:absolute;
    top:90px;
    left:10px;
    width:70px;
    height:80px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_left_arm{
    position:absolute;
    top:10px;
    left:-15px;
    width:45px;
    height:10px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
     #m_right_arm{
    position:absolute;
    top:10px;
    left:45px;
    width:45px;
    height:10px;
     background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_left_foot{
    position:absolute;
    top:50px;
    left:10px;
    width:10px;
    height:45px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
     #m_right_foot{
    position:absolute;
    top:50px;
    left:50px;
    width:10px;
    height:45px;
    background-color:#FFB870;
     border-radius:45%;
    -webkit-border-radius:45%;
    -mox-border-radius:45%;
    }
    
    #m_white_left_eye{
    position:absolute;
    top:40px;
    left:-10px;
    width:30px;
    height:20px;
    background-color:white;
    border-radius:40%;
    -webkit-border-radius:40%;
    -mox-border-radius:40%;
    border-style:solid;
    border-width:1px;
    border-color:#333399;
    }
    
    #m_white_right_eye{
    position:absolute;
    top:40px;
    left:80px;
    width:30px;
    height:20px;
    background-color:white;
    border-radius:40%;
    -webkit-border-radius:40%;
    -mox-border-radius:40%;
    border-style:solid;
    border-width:1px;
    border-color:#333399;
    }
    
    #m_black_left_eye{
    position:absolute;
    top:5px;
    left:0px;
    width:10px;
    height:10px;
    background-color:black;
    border-radius:50%;
    -webkit-border-radius:50%;
    -mox-border-radius:50%;
    animation: eyemove 3s ease-out alternate infinite;
    -webkit-animation: eyemove 3s ease-out alternate infinite;
    }
    
    @keyframes eyemove {
    from{left:0px;}
    to{left:20px;}
    }
    @-webkit-keyframes eyemove {
    from{left:0px;}
    to{left:20px;}
    }
    
    #m_black_right_eye{
    position:absolute;
    top:5px;
    left:0px;
    width:10px;
    height:10px;
    background-color:black;
    border-radius:50%;
    -webkit-border-radius:50%;
    -mox-border-radius:50%;
    animation: eyemove 3s ease-out alternate infinite;
    -webkit-animation: eyemove 3s ease-out alternate infinite;
    }

#m_nose{
    position:absolute;
    top:60px;
    left:40px;
    width:20px;
    height:10px;
    background-color:#FFD3D3;
    border-bottom-left-radius:50%;
    -webkit-border-bottom-left-radius:50%;
    -moz-border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
    -webkit-border-bottom-right-radius:50%;
    -moz-border-bottom-right-radius:50%;
    }
    
    #m_mouth{
    position:absolute;
    top:75px;
    left:35px;
    width:30px;
    height:3px;
    background-color:red;
    }
    
    #m_teeth{
    position:absolute;
    left:10px;
    width:10px;
    height:10px;
    background-color:white;
    }
  </style>
  
  
  
  </head>
  <body>
  <div id="mouse">
   <div id="m_head">
     <div id="m_white_left_eye">
      <div id="m_black_left_eye">
</div>
</div>
<div id="m_white_right_eye">
        <div id="m_black_right_eye">
</div>
</div>
<div id="m_nose">
</div>
<div id="m_mouth">
<div id="m_teeth">
</div>
</div>
</div>
<div id="m_left_ear">
</div>
<div id="m_right_ear">
</div>
<div id="m_body">
      <div id="m_left_arm">
</div>
<div id="m_right_arm">
</div>
<div id="m_left_foot">
</div>
<div id="m_right_foot">
</div>
</div>
</div>
</body>
</html>

Tiger Bird Webdesign

Sunday, 8 February 2015

Mouse With Moving Eyes With CSS Animation

HTML and CSS Code

No comments:

Post a Comment