smile animiert eigenbau

by basti1012

HTML

<div id="conti">
<div id="gesicht">

<div id="haarm1" class="haar haarmitte"></div>
<div id="haarm2" class="haar haarmitte"></div>
<div id="haarm3" class="haar haarmitte"></div>
<div id="haarm4" class="haar haarmitte"></div>
<div id="haarm5" class="haar haarmitte"></div>

<div id="haarl1" class="haar haarlinks"></div>
<div id="haarl2" class="haar haarlinks"></div>
<div id="haarl3" class="haar haarlinks"></div>
<div id="haarl4" class="haar haarlinks"></div>
<div id="haarl5" class="haar haarlinks"></div>

<div id="haarr1" class="haar haarrechts"></div>
<div id="haarr2" class="haar haarrechts"></div>
<div id="haarr3" class="haar haarrechts"></div>
<div id="haarr4" class="haar haarrechts"></div>
<div id="haarr5" class="haar haarrechts"></div>

<div id="lidtop1" class="lid lidtop"></div>
<div id="augelinks"><div id="irislinks" class="iris"></div></div>
<div id="lidbottom1" class="lid lidbottom"></div>

<div id="lidtop2" class="lid lidtop"></div>
<div id="augerechts"><div id="irisrechts" class="iris"></div></div>
<div id="lidbottom2" class="lid lidbottom"></div>

<div id="nase1"></div>

<div id="mundconti">
<div id="mund1"></div>
<div id="zunge"></div>
<div id="mund2"></div>
</div>


</div>
</div>

CSS

#conti {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  height: 100%;
  background: black;
}

#gesicht{
  position: absolute;
  top: 1%;
  left: 10%;
  width: 300px;
  height:300px;
  border-radius: 50%;
background:red;
  overflow:hidden;
}

#augelinks{
  position:absolute;
  left:50px;
  top:60px;
  width:70px;
  height:70px;
  background:white;
  border:2px solid black;
  border-radius:50%;
    overflow:hidden;
}

#augerechts{
  position:absolute;
  right:50px;
  top:60px;
  width:70px;
  height:70px;
  background:white;
  border:2px solid black;
  border-radius:50%;
}

.iris{
  position:absolute;
  width:25px;
  height:25px;
  background:black;
  border:1px double black;
  border-radius:50%;
    overflow:hidden;
  animation: iris 1s alternate infinite linear; 
}
#irisrechts{
    top:10px;
  left:10px;
}
#irislinks{
    top:10px;
  right:10px;
}
@keyframes iris {
0%{left:10px;}
100%{left:30px;}
}

#mund1{
  position:absolute;
  left:50px;
  top:200px;
  width:200px;
  height:20px;
  background:white;
  border:2px solid black;
  border-radius:50px 50px 0px 0px;
  z-index:3;
   
}
 
@keyframes mund2 {
0%{top:220px;}
100%{top:240px;}
}
 
#mund2{
  position:absolute;
  left:50px;
  top:224px;
  width:200px;
  height:20px;
  background:white;
  border:2px solid black;
  border-radius:0px 0px 50px 50px;
  z-index:1;
     animation: mund2 1s alternate infinite linear; 
}
#zunge{
  position:absolute;
  width:50px;
  height:0px;
  top:212px;
  left:calc(50% - 25px);
  background:green;
  border:1px solid black;
  border-radius:0px 0px 50% 50%;
  z-index:2;
  transform-origin:50% 0%;
      animation: zunge 2s alternate infinite linear; 
   
}

@keyframes zunge {
0%{transform:rotate(30deg);height:0px;}
20%{transform:rotate(20deg);height:100px;}
50%{transform:rotate(0deg) ;height:100px;}
100%{transform:rotate(-30deg);height:0px;}
}

 

#nase1{
  position:absolute;
  top:45%;
  left:37%;
  width:15%;
  height:15%;
  border-left:10px solid blue;
   ...

JavaScript

/*
        $(".haar").animate({ top: "+=5px"},3333)
           .animate({ left: "+=5px"},3333)
          .animate({ top: "-=5px"},3333)
           .animate({ left: "-=5px"},3333);
          //width: 'toggle'
  */