Dear Friends, In this article we will tell you How to make Avatar using CSS only with Animation? So i hope you like our artcle and if you want to get the source code related this artcle then you can get the given below code and paste your code editor for make changes.
Table of Contents
How to Start?
First of all learn html, css make this Avatar using css because it is make without any image. If you want to lean html, css then visit w3school website. It is a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.
Avatar Design
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this Avatar using CSS project make a fast with visual studio code editor.
HTML for Avatar
First of all give the div tag with class and class name is head then close it like this <div class=”head”> </div>. After this give the again div tag with class then close it like this <div class=”ear-one”></div>. Then give the again div tag with class and close it like this <div class=”ear-two”></div>. Again give the div tag with class and close it like this <div class=”face”></div> in this tag give the div tag with class like this <div class=”eye-brow-1″></div>. Again in this tag give the div tag with class like this <div class=”eye-brow-2″></div>. After this give the again div tag with class like this <div class=”eye-one”></div> in this tag give the one more div tag with class like this <div class=”gola-one”> in this tag give the again div tag with class like this <div class=”putli-one”></div>. Then copy eye-one class and paste it and give the one more div tag for eye off automatically.
After this give the again div tag for nok like this <div class=”nok”></div> again give the one more div tag with class like this <div class=”lip”></div> and last div tag for neck like this <div class=”neck”></div>. If you don’t understand by reading then look the html source code and copy this code an paste your code editor for make easy.
HTML Source Code..
<div class="head"></div>
<div class="ear-one"></div>
<div class="ear-two"></div>
<div class="face">
<div class="eye-brow-1"></div>
<div class="eye-brow-2"></div>
<div class="eye-one">
<div class="gola-one">
<div class="putli-one"></div>
</div>
<div class="eye-off-one"></div>
</div>
<div class="eye-two">
<div class="gola-two">
<div class="putli-two"></div>
</div>
<div class="eye-off-two"></div>
</div>
<div class="nok"></div>
<div class="lip"></div>
</div>
<div class="neck"></div>CSS for Avatar
If you want to give the style then you have three ways for using css first you can give using inline css and third you can give the internal css and fourth you can guve the external css. But we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement. Here we are using internal css so go to your starting head tag and give the style tag under head tag in this tag give *{} tag and give margin 0, padding 0, box-sizing border-box. and after this give the body tag in this tag use some properties like background color and font-family.
Now let us tell you how we will design our project using css. So let’s design our project. First you have to take Head class and set position absolute in it. After that, you have to take 70px from the top, then you have to take its width as 300px and height is also 300px and let the border radius be 50% from top to bottom and 0 from left-right. Then you have to set its background.
.head{
position: absolute;
top: 70px;
width: 300px;
height: 200px;
border-radius: 50% 50% 0 0;
background: rgb(34,34,34);
}
In this you have to take Air 2 and keep its position absolute. Then you have to take 38% from the left and keep its width 60px and height 100px. Its border radius is to be kept. Then save it by keeping the background burlywood, after that you have to take box shadow in it.
.ear-one{
position: absolute;
left: 38%;
width: 60px;
height: 100px;
border-radius: 50% 0 0 50%;
background: burlywood;
box-shadow: inset 0 0 40px rgba(0,0,0,0.692);
}
In this you have to take Air 2 and keep its position absolute. Then you have to take 38% from the left and keep its width 60px and height 100px. Its border radius is to be kept. Then save it by keeping the background burlywood, after that you have to take box shadow 0 50% 50% 0, in it.
.ear-two{
position: absolute;
right: 38%;
width: 60px;
height: 100px;
border-radius: 0 50% 50% 0;
background: burlywood;
box-shadow: inset 0 0 40px rgba(0,0,0,0.692);
}
For more information look the css code given below.
CSS Source Code..
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.head{
position: absolute;
top: 70px;
width: 300px;
height: 200px;
border-radius: 50% 50% 0 0;
background: rgb(34,34,34);
}
.ear-one{
position: absolute;
left: 38%;
width: 60px;
height: 100px;
border-radius: 50% 0 0 50%;
background: burlywood;
box-shadow: inset 0 0 40px rgba(0,0,0,0.692);
}
.ear-two{
position: absolute;
right: 38%;
width: 60px;
height: 100px;
border-radius: 0 50% 50% 0;
background: burlywood;
box-shadow: inset 0 0 40px rgba(0,0,0,0.692);
}
.face{
width: 300px;
height: 350px;
border-radius: 30% 30% 50% 50%;
background: burlywood;
box-shadow: inset 0 0 40px rgba(0,0,0,0.692);
z-index: 1;
}
.face .eye-brow-1{
width: 75px;
height: 35px;
border-top: 6px solid black;
border-radius: 50%;
position: absolute;
top: 33%;
left: 42%;
}
.face .eye-brow-2{
width: 75px;
height: 35px;
border-top: 6px solid black;
border-radius: 50%;
position: absolute;
top: 33%;
right: 42%;
}
.face .eye-one{
width: 75px;
height: 35px;
position: absolute;
top: 37%;
left: 42%;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 2px 5px rgb(46,46,46);
overflow: hidden;
}
.face .eye-one .gola-one{
width: 33px;
height: 33px;
margin-left: 20px;
background-color: black;
border-radius: 50%;
padding: 3px;
}
.face .eye-one .gola-one .putli-one{
width: 5px;
height: 5px;
background: #fff;
margin-left: 15px;
border-radius: 50%;
}
.face .eye-one .eye-off-one{
width: 75px;
height: 35px;
border-radius: 50%;
background: burlywood;
z-index: 1;
position: relative;
bottom: 33px;
box-shadow: inset 0 0 20px rgba(126,125,125,0.363);
animation: animate1 1s ease-in-out infinite;
}
@keyframes animate1{
0%{
transform: translateY(-35px);
}
}
.face .eye-two{
width: 75px;
height: 35px;
position: absolute;
top: 37%;
right: 42%;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 2px 5px rgb(46,46,46);
overflow: hidden;
}
.face .eye-two .gola-two{
width: 33px;
height: 33px;
margin-left: 20px;
background-color: black;
border-radius: 50%;
padding: 3px;
}
.face .eye-two .gola-two .putli-two{
width: 5px;
height: 5px;
background: #fff;
margin-left: 15px;
border-radius: 50%;
}
.face .eye-two .eye-off-two{
width: 75px;
height: 35px;
border-radius: 50%;
background: burlywood;
z-index: 1;
position: relative;
bottom: 33px;
box-shadow: inset 0 0 20px rgba(126,125,125,0.363);
animation: animate2 1s ease-in-out infinite;
}
@keyframes animate2{
0%{
transform: translateY(-35px);
}
}
.nok{
width: 60px;
height: 60px;
border-top: 5px solid black;
border-left: 5px solid black;
position: absolute;
top: 47%;
left: 48%;
transform: rotate(-135deg);
border-radius: 30%;
}
.lip{
width: 100px;
height: 25px;
background-color: red;
box-shadow: inset 0 0 10px black;
position: absolute;
left: 635px;
top: 62%;
border-radius: 50%;
}
.neck{
position: absolute;
left: 600px;
bottom: 100px;
width: 160px;
height: 70px;
background: burlywood;
box-shadow: inset 0 0 30px rgb(161,129,87);
}
