Thursday, March 23, 2017

3D text style with shadow

                No comments   

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>

Tuesday, March 21, 2017

How To Make Semi-Transparent Buttons

                No comments   

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>

Tuesday, March 7, 2017

How to create Animation Using HTML & CSS

           ,      No comments   

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>

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>

 

Popular Posts

  • 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...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • Basic of css.
    Introduction :- Hii Friends..   Today I explain what is Css and why we use Css and the basic structure of css. so here I               ...
  • stored procedure with case and actions
    Intoduction :- Hii Friends... Today I  explain how to use case and action in stored procedure .  CREATE Proc [dbo].[Proc_ManageRatingA...
  • 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 cop...
  • 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 t...
  • 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...
  • Awarepedia services
    Intoduction :-   Hii Friends...   Today I explain services of awarepedia.com  . Awarepedia is a online software development company and the...
  • 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...
  • 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...