Awarepedia services

Intoduction :- 
Hii Friends... 
Today I explain services of awarepedia.com . Awarepedia is a online software development company and they create all types of software and websites. The one of the best golden point of this company is client support and client satisfaction . 

About The Company

Awarepedia is a high performance digital agency dedicated towards building application that creates world class user experience across web, eCommerce and mobile.

Our Approach- “A customer is the most important visitor on our premises, he is not dependent on us. We are dependent on him. He is not an interruption in our work. He is the purpose of it. He is not an outsider in our business. He is part of it. We are not doing him a favour by serving him. He is doing us a favour by giving us an opportunity to do so.”

Our Team- We are driven by a deep level of empathy for our partners and customers, passion for the quality of our craft, persistent curiosity, and the drive to constantly improve our respective trade. Our team is a multi-disciplinary unit of creative technologists that specialize in technology, design and strategy.

Our Process- We pride ourselves in delivering the very best to our customers. That’s why we’ve invested a lot of time to refining a workflow that puts transparency and accountability first.

Our Capability- Awarepedia is no small operation. We have technical, creative and business minds all working together to create flawless digital solutions, across both web and mobile platforms.

How We Think- Constantly tested and edited through hands on experience, Awarepedia has developed a specific four-part creative process which drives the brand development, content production & custom experience design teams. At Awarepedia, we run our projects using a four-part creative process.

Work With Us- We are constantly on the look out for the best and brightest minds to collaborate with us. At Awarepedia, we hold ourselves to these ideals.

Our Standerder- “Our core standards serve as the foundation of behaviors that drive us.”

Services-

1. Mobile recharge software: To start a Mobile Recharge Business to promote Dealer Distributor network with our Mobile Recharge Software . It offers complete control over your own Multiple recharge business and can control your Telecom operators, Bulk SMS and Mobile Recharge API as per your needs. Our Mobile Recharge Software (B2B) Mobile Recharge Software (B2C)  is fully well-suited with all latest Technical requirements and challenges of the industry like: Its supports Multiple Recharge APIs Integrations, Bill Payments, Utility Bills , Surcharge System, Packages System, Android OS Platform and more.

2. Money Transfer Service (DMTS) with IMPS technology is one of the most demanding services today in India. Become DMTS agent/retailer to remit money on behalf of your customers. Most of the people are still not connected with the bank. The density of banks in rural or semi urban area is still very low.If a person goes to the bank for depositing/transferring funds to his friend/family/else, he has to spend a long time and need to wait in queue. This is why people prefer to visit DMTS agent/retailer for fund transfer. By using money transfer API will be able to transfer and receive funds From His Wallet to Any Bank Account, as well as Wallet to Wallet Money transfers. In our Web based money transfer software you can make unlimited distributors and retailers for your network and you can also set their surcharges separately.

Read More

3D text style with shadow

Intoduction :- 
Hii Friends... 
Today I explain how to make 3D text style with shadow with the help of css. The solution to the shadow is to have 3D text. There are many models available which allow us to input their text in to the 3D model and use such in the site. Additionally, you could hire a 3D artist to make your logo from scratch or to animate your existing typography, specifically if it is to be used for marketing videos on the webpage.

Demo:-

Example :- 
<div class="Dotnet-text">Dotnet-Modules</div>
<link async href="http://fonts.googleapis.com/css?family=Arizonia" rel="stylesheet" type="text/css"/>
<style>
.Dotnet-text {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  background-color:#ff44c7;
  border: none;
  width:50%;
  padding-top:20px;
  height:30%;
  font: normal 75px/normal "Arizonia", Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  text-shadow: 0 15px 29px rgba(0,0,0,0.0980392) , 10px 20px 5px rgba(0,0,0,0.0470588) , -10px 20px 5px rgba(0,0,0,0.0470588) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}

.Dotnet-text:hover {
  text-shadow: 0 -15px 29px rgba(0,0,0,0.0980392) , 10px -20px 5px rgba(0,0,0,0.0470588) , -10px -20px 5px rgba(0,0,0,0.0470588) ;
}

</style>

Read More

How To Make Semi-Transparent Buttons

Intoduction :- 
Hii Friends... 
Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes trendy. Its a hottest style to put a photographic background images. We call these button as a ghost buttons. Its a very easy and styli.  You can even add them your posts and pages without writing CSS or HTML. its a simply a button with a border and a transparent background color.
Example :- 
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body, div
            {
                width:100%;
                height:100%;
                margin:0;
                background:#249fa3;
                position:absolute;
            }
            .ghost
            {
                
               display:inline-block;
                position: relative;
                top: 50%;
                left:50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                
                font-family: Tahoma, Verdana, Segoe, sans-serif;
                font-size: 3em;
                letter-spacing: 0.1em;
                color:#ffffff;
               
                text-decoration:none;
                text-transform:uppercase;
                text-rendering:optimizeLegibility;
                
                border:0.10em solid #fff;
                padding:0.4em 0.6em;
                
                -webkit-transition: color 300ms, background 500ms, border-color 700ms;
                transition: color 300ms, background 500ms, border-color 700ms;
            }
            .ghost:hover
            {
                background:#d47497;
                border-color:#91f21b;
                color:#545e7a;
            }
        </style>
    </head>
    <body>
        <div>
            <a class="ghost" href="http://dotnetmodules.blogspot.in">Button</a>
        </div>
    </body>

 </html>

Read More

How to create Animation Using HTML & CSS

Hii Friends... Today I explain how to create Animations using HTML and CSS . you can use this code in your project copy this code and paste it.

Demo :  

I ? C S S

♫ ♪

Code :  

<html>
<head>
<style>
body, html{
  width:100%;
  height:100%;
  margin:0;
  display: table;
  text-align: center;
}

.wrapper{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.background-circle{
  width: 400px;
  height: 400px;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 auto;
  background: #95B3BF;
  position: relative;
  -webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  -moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  -o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  -ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  animation:grow 0.7s 1 ease;
  -webkit-animation:grow 0.7s 1 ease;
  transform-origin: center;
}
.border-circle{
  width: 399px;
  height: 399px;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -220px;
  margin-top: -220px; 
  border: 10px solid #FCB040;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: center;
  transform-origin: center;
}
.border-circle#one{
  animation:border-pulse 1s 3.1s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:border-pulse 1s 3.1s 1 ease;
  -webkit-animation-fill-mode: forwards;
}
.border-circle#two{
  animation:border-pulse 1s 3.3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:border-pulse 1s 3.3s 1 ease;
  -webkit-animation-fill-mode: forwards;
}

.body{
  width: 285px;
  height: 600px;
  margin: 0 auto;
  background: #222;
  border-radius: 100px;
  position: relative;
  top: 200px;
  animation:body-enter 0.7s 0.2s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:body-enter 0.7s 0.2s 1 ease;
  -webkit-animation-fill-mode: forwards;
   -webkit-transform:scale(0) translateZ(0);
  transform:scale(0) translateZ(0);
}

.head{
  width: 196px;
  height: 260px;
  border-radius: 50px;
  background: #FFE4BE;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -210px;
  margin-left: -98px;
  animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
  -webkit-animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
/*
  animation:grow 0.7s 0.4s 1 ease;
  -webkit-animation:grow 0.7s 0.4s 1 ease;
*/
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  -webkit-transform:scale(0) translateZ(0);
  transform:scale(0) translateZ(0);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.hair-main{
  width:220px;
  height: 0px;
  background: #E7AB57;
  border-radius: 54px 54px 0px 0px;
  margin-left: -12px;
  margin-top: -10px;
  animation:hair-anim 0.7s 0.9s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:hair-anim 0.7s 0.9s 1 ease;
  -webkit-animation-fill-mode: forwards;
  position: relative;
  z-index: 2;
}

.hair-top{
  width: 128px;
  height: 70px;
  opacity: 0;
  border-top-right-radius: 30px;
  background: #E7AB57;
  position: relative;
  top: -17px;
  left: 50%;
  transform: translateX(-64px);
  -webkit-transform: translateX(-64px);
  transform-origin: right;
  -webkit-transform-origin: right;
  animation:hair-top-anim 0.7s 1s 1 ease;
  -webkit-animation:hair-top-anim 0.7s 1s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.hair-bottom{
  width: 54px;
  height: 50px;
  opacity: 0;
  border-bottom-left-radius: 25px;
  background: #E7AB57;
  position: relative;
  top: -20px;
  left: 50%;
  transform: translateX(-27px);
  -webkit-transform: translateX(-27px);
  transform-origin: left;
  -webkit-transform-origin: left;
  animation:hair-bottom-anim 0.7s 1.4s 1 ease;
  -webkit-animation:hair-bottom-anim 0.7s 1.4s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
 
.sideburn{
  width: 8px;
  height: 25px;
  background: #E7AB57;
  position: absolute;
  bottom: -25px;
  opacity: 0;
  animation:sideburn-anim 0.7s 0.9s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:sideburn-anim 0.7s 0.9s 1 ease;
  -webkit-animation-fill-mode: forwards;
}

.sideburn#left{
  left: 12px;
}

.sideburn#right{
  right: 12px;
}

.face{
  width: 180px;
  height: 0px;
  border-radius: 48px 48px 0 0;
  background: #FFE4BE;
  position: absolute;
  top: 40px;
  left: 8px;
  animation:hair-anim 0.1s 0.8s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation:hair-anim 0.1s 0.8s 1 linear;
  -webkit-animation-fill-mode: forwards;
  z-index: 3;
}
.nose{
  width: 20px;
  height: 45px;
  opacity: 1;
  background: #FFE4BE;
  border-top-left-radius: 20px;
  position: absolute;
  left: 50%;
  top: 80px;
  margin-left:-20px;
  animation:shadow-anim 0.7s 3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:shadow-anim 0.7s 3s 1 ease;
  -webkit-animation-fill-mode: forwards;
  opacity: 0;
  z-index: 5;
}
.ear{
  width: 24px;
  height: 35px;
  background: #FFE4BE;
  border-radius: 12px;
  position: absolute;
  top: 116px;
  animation:grow 0.7s 1.3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 1.3s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mouth{
  width: 66px;
  height: 33px;
  border-radius: 0 0 33px 33px;
  background: white;
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -33px;
  animation:grow 0.7s 2.6s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 2.6s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.ear#left{
  left: -12px;
}
.ear#right{
  right: -12px;
}
.eye-shadow{
  width:30px;
  height: 15px;
  border-radius: 0 0 15px 15px;
  background:rgba(149,36,0,0.1);
  position: absolute;
  top: 70px;
  animation:grow 0.7s 2s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 2s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.eye-shadow#left{
  left: 35px;
  z-index: 5;
}
.eye-shadow#right{
  right: 35px;
}
.eyebrow{
  width: 40px;
  height: 10px;
  background: #E7AB57;
  position: absolute;
  top: -35px;
  left: 50%;
  margin-left: -20px;
  opacity: 0;
  -webkit-backface-visibility: hidden;
}
.eye-shadow#left .eyebrow{
  animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
  -webkit-animation-fill-mode: forwards;
}
.eye-shadow#right .eyebrow{
  animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
  -webkit-animation-fill-mode: forwards;
}
.eye{
  width: 20px;
  height: 28px;
  border-radius: 10px;
  background: #334C68;
  position: absolute;
  top: -18px;
  left: 50%;
  margin-left: -10px;
  animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;

}
.shadow-wrapper{
  width: 98px;
  height: 260px;
  position: absolute;
  left: -8px;
  bottom: -84px;
  z-index: 4;
  overflow: hidden;
}
.shadow{
  width: 98px;
  height: 260px;
  border-radius: 50px;
  background: rgba(149,36,0,0.1);
  position: absolute;
  z-index: 4;
  opacity: 0;
  animation:shadow-anim 1s 2.8s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:shadow-anim 1s 2.8s 1 ease;
  -webkit-animation-fill-mode: forwards;
}
.triangle-light{
  width: 400px;
  height: 600px;
  background: #FFFFFF;
  opacity: 0.2;
  position: absolute;
  right: -65%;
  animation: triangle-light-anim 1s 2.8s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation: triangle-light-anim 1s 2.8s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: translate(200px,0px);
  transform: translate(200px,0px);
}
.triangle-dark{
  width: 400px;
  height: 600px;
  background: #000000;
  opacity: 0.2;
  position: absolute;
  left: -60%;
  top: 30%;
  animation: triangle-dark-anim 1s 3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation: triangle-dark-anim 1s 3s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: translate(-200px,0px);
  transform: translate(-200px,0px);
}
.music-note{
  position: absolute;
  font-size: 150px;
  color: #FCB040;
  width: 1px;
  left: 50%;
  opacity: 0;
}
.music-note#one{
  margin-left: -250px;
  top: 50%;
  animation: note-anim 2s 3.5s infinite ease;
  animation-fill-mode: forwards;
  -webkit-animation: note-anim 2s 3.5s infinite ease;
  -webkit-animation-fill-mode: forwards;
}
.music-note#two{
  margin-left: 150px;
  top: 30%;
  animation: note-anim 2s 4.3s infinite ease;
  animation-fill-mode: forwards;
  -webkit-animation: note-anim 2s 4.3s infinite ease;
  -webkit-animation-fill-mode: forwards;
}
.shirt-text{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: white;
  position: relative;
  top: -300px;
  font-size: 50px;
  display: inline-block;
  -webkit-text-stroke: 2px;
  -webkit-transform: translate(0px,100px);
  transform: translate(0px,100px);
  animation-fill-mode: forwards !important;
  -webkit-animation-fill-mode: forwards !important;
}
.shirt-text:nth-of-type(1){
  animation: text-anim 0.7s 3s 1 ease;
  -webkit-animation: text-anim 0.7s 3s 1 ease;
}
.shirt-text:nth-of-type(2){
  color: #EF4136;
  animation: text-anim 0.7s 3.1s 1 ease;
  -webkit-animation: text-anim 0.7s 3.1s 1 ease;
}
.shirt-text:nth-of-type(3){
  animation: text-anim 0.7s 3.2s 1 ease;
  -webkit-animation: text-anim 0.7s 3.2s 1 ease;
}
.shirt-text:nth-of-type(4){
  animation: text-anim 0.7s 3.3s 1 ease;
  -webkit-animation: text-anim 0.7s 3.3s 1 ease;
}
.shirt-text:nth-of-type(5){
  animation: text-anim 0.7s 3.4s 1 ease;
  -webkit-animation: text-anim 0.7s 3.4s 1 ease;
}
 
@keyframes grow
{
0% { 
  position:absolute;
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
}
60% { 
  -webkit-transform: scale(1.15) translateZ(0);
  transform: scale(1.15) translateZ(0);
}
80% { 
  -webkit-transform: scale(0.95) translateZ(0);
  transform: scale(0.95) translateZ(0);
}
100% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}
}

@-webkit-keyframes grow /* Safari and Chrome */
{
0% { 
  position:absolute;
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
}
60% { 
  -webkit-transform: scale(1.15) translateZ(0);
  transform: scale(1.15) translateZ(0);
}
80% { 
  -webkit-transform: scale(0.95) translateZ(0);
  transform: scale(0.95) translateZ(0);
}
100% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}
}

@keyframes body-enter
{
0% {
  -webkit-transform: translateY(200px) translateZ(0);
  transform: translateY(200px) translateZ(0);
}
60% { 
  -webkit-transform: translateY(-20px) translateZ(0);
  transform: translateY(-20px) translateZ(0);
}
80% { 
  -webkit-transform: translateY(30px) translateZ(0);
  transform: translateY(30px) translateZ(0);
}
100% { 
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@-webkit-keyframes body-enter /* Safari and Chrome */
{
0% {
  -webkit-transform: translateY(200px) translateZ(0);
  transform: translateY(200px) translateZ(0);
}
60% { 
  -webkit-transform: translateY(-20px) translateZ(0);
  transform: translateY(-20px) translateZ(0);
}
80% { 
  -webkit-transform: translateY(30px) translateZ(0);
  transform: translateY(30px) translateZ(0);
}
100% { 
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@keyframes hair-anim
{
0% { 
  height:0px;
  -webkit-transform: translateY(137px) translateZ(0);
  transform: translateY(137px) translateZ(0);
}
100% {
  height: 137px;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@-webkit-keyframes hair-anim /* Safari and Chrome */
{
0% { 
  height:0px;
  -webkit-transform: translateY(137px) translateZ(0);
  transform: translateY(137px) translateZ(0);
}
100% {
  height: 137px;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@keyframes sideburn-anim
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@-webkit-keyframes sideburn-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@keyframes hair-top-anim
{
0% {
  opacity: 0;
  -webkit-transform:translate(-64px, 30px) translateZ(0);
  transform:translate(-64px, 30px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
}
}

@-webkit-keyframes hair-top-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform:translate(-64px, 30px) translateZ(0);
  transform:translate(-64px, 30px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
}
}

@keyframes hair-bottom-anim
{
0% {
  opacity: 0;
  -webkit-transform:translate(-27px, -40px) translateZ(0);
  transform:translate(-27px, -40px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
}
}

@-webkit-keyframes hair-bottom-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform:translate(-27px, -40px) translateZ(0);
  transform:translate(-27px, -40px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
}
}

@keyframes music-move
{
0% {
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
33% { 
  -webkit-transform: rotate(-5deg) translateZ(0);
  transform: rotate(-5deg) translateZ(0);
}
66% { 
  -webkit-transform: rotate(5deg) translateZ(0);
  transform: rotate(5deg) translateZ(0);
}
100% { 
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
}

@-webkit-keyframes music-move /* Safari and Chrome */
{
0% {
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
33% { 
  -webkit-transform: rotate(-5deg) translateZ(0);
  transform: rotate(-5deg) translateZ(0);
}
66% { 
  -webkit-transform: rotate(5deg) translateZ(0);
  transform: rotate(5deg) translateZ(0);
}
100% { 
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
}

@keyframes eyebrow-anim-right
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
} 
100% {
  opacity: 1;
  -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
  transform: rotate(9deg) translateY(0px) translateZ(0);
}
}

@-webkit-keyframes eyebrow-anim-right /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
  transform: rotate(9deg) translateY(0px) translateZ(0);
}
}
@keyframes eyebrow-raise
{
0% {
  top:-35px;
}
80% {
  top:-35px;

}
100% {
  top:-45px;
}
}

@-webkit-keyframes eyebrow-raise /* Safari and Chrome */
{
0% {
  top:-35px;
}
80% {
  top:-35px;

}
100% {
  top:-45px;
}
}
@keyframes eyebrow-anim-left
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px);
} 
100% {
  opacity: 1;
  -webkit-transform:translateY(0px) translateZ(0);
  transform:translateY(0px) translateZ(0);
}
}

@-webkit-keyframes eyebrow-anim-left /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform:translateY(0px) translateZ(0);
  transform:translateY(0px) translateZ(0);
}
}

@keyframes border-pulse
{
0% {
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  border-width: 20px;
}
40% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  border-width: 20px;
  margin-left: -220px;
  margin-top: -220px;
}
100% {
  -webkit-transform: scale(1.5) translateZ(0);
  transform: scale(1.5) translateZ(0);
  border-width: 0px;
  border-style: double;
  margin-left: -200px;
  margin-top: -200px;
}
}

@-webkit-keyframes border-pulse /* Safari and Chrome */
{
0% {
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  border-width: 20px;
}
40% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  border-width: 20px;
  margin-left: -220px;
  margin-top: -220px;
}
100% {
  -webkit-transform: scale(1.5) translateZ(0);
  transform: scale(1.5) translateZ(0);
  border-width: 0px;
  border-style: double;
  margin-left: -200px;
  margin-top: -200px;
}
}
@keyframes shadow-anim
{
0% {
  opacity: 0;
  -webkit-transform: translate(98px,0px) translateZ(0);
  transform: translate(98px,0px) translateZ(0);
}
50% {
  opacity: 0;
}
100% {
  opacity: 1;
  -webkit-transform: translate(0px,0px) translateZ(0);
  transform: translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes shadow-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translate(98px,0px) translateZ(0);
  transform: translate(98px,0px) translateZ(0);
}
50% {
  opacity: 0;
}
100% {
  opacity: 1;
  -webkit-transform: translate(0px,0px) translateZ(0);
  transform: translate(0px,0px) translateZ(0);
}
}
@keyframes triangle-light-anim
{
0% {
  -webkit-transform: translate(200px,0px) translateZ(0);
  transform: translate(200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(45deg) translate(0px,0px) translateZ(0);
  transform: rotate(45deg) translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes triangle-light-anim /* Safari and Chrome */
{
0% {
  -webkit-transform: translate(200px,0px) translateZ(0);
  transform: translate(200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(45deg) translate(0px,0px) translateZ(0);
  transform: rotate(45deg) translate(0px,0px) translateZ(0);
}
}
@keyframes triangle-dark-anim
{
0% {
  -webkit-transform: translate(-200px,0px) translateZ(0);
  transform: translate(-200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(-45deg) translate(0px,0px) translateZ(0);
  transform: rotate(-45deg) translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes triangle-dark-anim /* Safari and Chrome */
{
0% {
  -webkit-transform: translate(-200px,0px) translateZ(0);
  transform: translate(-200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(-45deg) translate(0px,0px) translateZ(0);
  transform: rotate(-45deg) translate(0px,0px) translateZ(0);
}
}
@keyframes note-anim
{
0% {
  opacity: 0;
  -webkit-transform: translate(0px,50px) translateZ(0);
  transform: translate(0px,50px) translateZ(0);
}
30% {
  -webkit-transform:rotate(12deg) translate(-30px,0px) translateZ(0);
  transform:rotate(12deg) translate(-30px,0px) translateZ(0);
}
45% {
  opacity: 1;
} 
60% {
  -webkit-transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
  transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
}
100% {
  opacity: 0;
  -webkit-transform:rotate(0deg) translate(0px,-200px) translateZ(0);
  transform:rotate(0deg) translate(0px,-200px) translateZ(0);
}
}

@-webkit-keyframes note-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translate(0px,50px) translateZ(0);
  transform: translate(0px,50px) translateZ(0);
}
30% {
  -webkit-transform:rotate(12deg) translate(-30px,0px) translateZ(0);
  transform:rotate(12deg) translate(-30px,0px) translateZ(0);
}
45% {
  opacity: 1;
} 
60% {
  -webkit-transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
  transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
}
100% {
  opacity: 0;
  -webkit-transform:rotate(0deg) translate(0px,-200px) translateZ(0);
  transform:rotate(0deg) translate(0px,-200px) translateZ(0);
}
}
@keyframes text-anim
{
0% {
  -webkit-transform: translate(0px,100px) translateZ(0);
  transform: translate(0px,100px) translateZ(0);
}
60% {
  -webkit-transform:translate(0px,-20px) translateZ(0);
  transform:translate(0px,-20px) translateZ(0);
}
80% {
  -webkit-transform:translate(0px,15px) translateZ(0);
  transform:translate(0px,15px) translateZ(0);
}
100% {
  -webkit-transform:translate(0px,0px) translateZ(0);
  transform:translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes text-anim /* Safari and Chrome */
{
0% {
  -webkit-transform: translate(0px,100px) translateZ(0);
  transform: translate(0px,100px) translateZ(0);
}
60% {
  -webkit-transform:translate(0px,-20px) translateZ(0);
  transform:translate(0px,-20px) translateZ(0);
}
80% {
  -webkit-transform:translate(0px,15px) translateZ(0);
  transform:translate(0px,15px) translateZ(0);
}
100% {
  -webkit-transform:translate(0px,0px) translateZ(0);
  transform:translate(0px,0px) translateZ(0);
}
}
@keyframes eye-blink
{
0% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
45% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
50% {
  -webkit-transform: scaleY(0.1) translateZ(0);
  transform: scaleY(0.1) translateZ(0);
}
55% {
  -webkit-transform: scaleY(1) translateY(0px);
  transform: scaleY(1) translateY(0px);
}
100% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
}

@-webkit-keyframes eye-blink /* Safari and Chrome */
{
0% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
45% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
50% {
  -webkit-transform: scaleY(0.1) translateZ(0);
  transform: scaleY(0.1) translateZ(0);
}
55% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
100% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
}
</style>
    </head>
<body>
  <div class="wrapper">
    <div class="border-circle" id="one"></div>
    <div class="border-circle" id="two"></div>
    <div class="background-circle">
      <div class="triangle-light"></div>
      <div class="body"></div>
      <span class="shirt-text">I</span>
      <span class="shirt-text">?</span>
      <span class="shirt-text">C</span>
      <span class="shirt-text">S</span>
      <span class="shirt-text">S</span>
      <div class="triangle-dark"></div>
    </div>
    <div class="head">
      <div class="ear" id="left"></div>
      <div class="ear" id="right"></div>
      <div class="hair-main">
        <div class="sideburn" id="left"></div>
        <div class="sideburn" id="right"></div>
        <div class="hair-top"></div>
      </div>
      <div class="face">
        <div class="hair-bottom"></div>
        <div class="nose"></div>
        <div class="eye-shadow" id="left">
          <div class="eyebrow"></div>
          <div class="eye"></div>
        </div>
        <div class="eye-shadow" id="right">
          <div class="eyebrow"></div>
          <div class="eye"></div>
        </div>
        <div class="mouth"></div>
        <div class="shadow-wrapper">
          <div class="shadow"></div>
        </div>
      </div>
    </div>
    <span class="music-note" id="one">&#9835;</span>
    <span class="music-note" id="two">&#9834;</span>
  </div>
</body>
</html>

Read More

How to create pikachu character using HTML & CSS

Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project copy this code and paste it.
Demo : 

Code: 
<html>
<head>
<style>
* {margin:0; padding:0;}
.bg {
    background: #FFD720;
    -webkit-animation: bgch 8.5s infinite;
    -moz-animation:    bgch 8.5s infinite;
    -o-animation:      bgch 8.5s infinite;
    animation:         bgch 8.5s infinite;
    animation-fill-mode: forwards;  /*save properties after the animation is done*/
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.wrapper {
    width: 1024px;
    margin:0 auto;
}
.eyelids { /*left*/
    border-radius: 50%;
    height: 350px;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 350px;
}
.eyelids:after { /*upper*/
    content: "";
    overflow: hidden;
    height: 350px;
    width:370px;
    background:#FFD720;
    position:absolute;
    border-radius: 45% / 50%;
    overflow: hidden;
    z-index: 999;
    margin-top: -350px;
    margin-left: -9px;
    box-shadow: 446px 0 0 0 #FFD720; /*black part of the second eye*/
    -webkit-animation: blink 1.7s infinite, bgch 8.5s infinite;
    -moz-animation:    blink 1.7s infinite, bgch 8.5s infinite;
    -o-animation:      blink 1.7s infinite, bgch 8.5s infinite;
    animation:         blink 1.7s infinite, bgch 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eyelids:before { /*lower*/
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); /*empty circle*/
    border-radius: 50%;
    box-shadow: 0 83px 0 1px #FFD720; /*yellow circle with offset*/
    content: "";
    height: 350px;
    margin-left: -7px;
    margin-top: 0px;
    position: absolute;
    width: 364px;
    -webkit-animation: blink2 1.7s infinite, bgchE 8.5s infinite;
    -moz-animation:    blink2 1.7s infinite, bgchE 8.5s infinite;
    -o-animation:      blink2 1.7s infinite, bgchE 8.5s infinite;
    animation:         blink2 1.7s infinite, bgchE 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eyelids2 { /*right*/
    border-radius: 50%;
    height: 350px;
    margin-left: 446px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 350px;
}
.eyelids2:after { /*upper*/
    content: "";
    overflow: hidden;
    height: 350px;
    width:370px;
    background:#FFD720;
    position:absolute;
    border-radius: 45% / 50%;
    overflow: hidden;
    z-index: 999;
    margin-top: -350px;
    margin-left: -9px;
    box-shadow: 446px 0 0 0 #FFD720; /*black part of the second eye*/
    -webkit-animation: blink 1.7s infinite, bgch 8.5s infinite;
    -moz-animation:    blink 1.7s infinite, bgch 8.5s infinite;
    -o-animation:      blink 1.7s infinite, bgch 8.5s infinite;
    animation:         blink 1.7s infinite, bgch 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eyelids2:before { /*lower*/
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); /*empty circle*/
    border-radius: 50%;
    box-shadow: 0 83px 0 1px #FFD720; /*yellow circle with offset*/
    content: "";
    height: 350px;
    margin-left: -7px;
    margin-top: 0px;
    position: absolute;
    width: 364px;
    -webkit-animation: blink2 1.7s infinite, bgchE 8.5s infinite;
    -moz-animation:    blink2 1.7s infinite, bgchE 8.5s infinite;
    -o-animation:      blink2 1.7s infinite, bgchE 8.5s infinite;
    animation:         blink2 1.7s infinite, bgchE 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eye { /*black part of the eye*/
    margin-top: 40px;
    height: 350px;
    width:350px;
    background:#000000;
    position:relative;
    border-radius: 50%;
    margin-left: 114px;
    box-shadow: 446px 0 0 0 #000000; /*black part of the second eye*/
    -webkit-animation: bgchEYE 8.5s infinite;
    -moz-animation:    bgchEYE 8.5s infinite;
    -o-animation:      bgchEYE 8.5s infinite;
    animation:         bgchEYE 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eye:before { /*pupil*/
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50%;
    content: "";
    display: block;
    position:relative;
    top: 100px;
    height: 150px;
    width: 150px;
    margin: 100px auto 0;      
    box-shadow: 440px 0 0 1px #FFFFFF; /* second pupil */
    -webkit-animation: bgchPUP 8.5s infinite;
    -moz-animation:    bgchPUP 8.5s infinite;
    -o-animation:      bgchPUP 8.5s infinite;
    animation:         bgchPUP 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eye:after { /*cheeks*/
    background: none repeat scroll 0 0 #F61037;
    border-radius: 50%;
    content: "";
    height: 230px;
    width: 230px;
    margin-left: -120px;
    margin-top: 170px;
    position: absolute;
    box-shadow: 810px 0 0 1px #F61037; /* second cheek */
    z-index: 1000;/* bgg 0.1s 2.1s, bgbb 0.1s 4.8s, bgyy 0.1s 7.5s; */
    -webkit-animation: bgchch 8.5s infinite;
    -moz-animation:    bgchch 8.5s infinite;
    -o-animation:      bgchch 8.5s infinite;
    animation:         bgchch 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.nose {
    position: relative;
    margin: -28px auto 0;
    border-left: 25px solid rgba(0, 0, 0, 0);
    border-right: 25px solid rgba(0, 0, 0, 0);
    border-top: 28px solid #000000;
    height: 0;
    width: 0;
}
.mouth {
    position: relative;
    margin:0 auto;
    margin-top: 50px;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-bottom: 67px solid #000000;
    height: 0;
    width: 0;
}
.mouth:before {
    border-bottom: 54px solid #FFD720;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    content: "";
    left: -50px;
    margin-top: 13px;
    position: absolute;
    -webkit-animation: bgchm 8.5s infinite;
    -moz-animation:    bgchm 8.5s infinite;
    -o-animation:      bgchm 8.5s infinite;
    animation:         bgchm 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

/*MOUTH COLOR CHANGING ANIMATION*/
@-webkit-keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@-moz-keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@-o-keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}

/*CHEEKS*/
@-webkit-keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@-moz-keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@-o-keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}

/*BLINK upper eyelid*/
@-webkit-keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}
@-moz-keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}
@-o-keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}
@keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}

/*BLINK lower eyelid*/
@-webkit-keyframes blink2 {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}
@-moz-keyframes blink2 {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}
@-o-keyframes blink2 {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}
@keyframes blink2     {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}

/*PUPILS eye:before*/
@-webkit-keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@-moz-keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@-o-keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}

/*EYES*/
@-webkit-keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@-moz-keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@-o-keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}

/*UNIVERSAL CHANGE*/
@-webkit-keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@-moz-keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@-o-keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}

/*EYELIDS*/
@-webkit-keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@-moz-keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@-o-keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}

</style>
</head>
<body>
<div class="wrapper">
    <div class="eye">
        <div class="eyelids"></div>
        <div class="eyelids2"></div>
    </div>
    <div class="nose"></div>
    <div class="mouth"></div>
</div>
</body>
</html>

 

Read More