Tuesday, March 7, 2017

How to create pikachu character using HTML & CSS

           ,      No comments   

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>

 

0 comments:

Post a Comment

Popular Posts

  • Auto-Hiding Navbar with Javascript
    Intoduction :-   Hii Friends... today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with...
  • How To scroll from bottom to top
    Intoduction :- Hii Friends...   Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jque...
  • Awarepedia services
    Intoduction :-   Hii Friends...   Today I explain services of awarepedia.com  . Awarepedia is a online software development company and the...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • Creating Alert Messages in Bootstrap
    Intoduction :-   Hii Friends... Alert boxes are used quite often to stand out the information that requires immediate attention of the en...
  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • How to make a jumborton in bootstrap
    Introduction  Hi.. Friends, Today I explain that how to use jumborton in bootstrap.  A jumbotron indicates a big box for calling ...
  • How to make Testimonial Slider
    Intoduction :- Hii Friends... Today I explain how to make a bootstrap Testimonial Slider. Testimonial is a formal statement testifying t...
  • How to Make Glyphicon in bootstrap
    Introduction Hi.. Friends, Today I explain that how to use glyphicons with bootstrap in asp.net. In the bootstrap, bootstrap...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...