Averell Dalton en CSS


<!DOCTYPE html>
<html>
  <head>
    <title>Averell Dalton en CSS</title>

<script type="text/javascript">

    	 var mua1 = 0;

function action1Press(){
	mua1 = mua1 + 1;
	if(mua1>3){
        mua1 =0;
  	}
	multitouchea(mua1);
  }

  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1awav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1bwav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1cwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1dwav");
  multia4.play();
  }
  }

</script>
<style>


body {
  position: absolute;
  margin-left: 20px;
  margin-top: 20px;
}

.menton{position: absolute; border-color: #ff9999 transparent transparent; border-style: solid; border-width: 103px 33px 0px; height: 0; position: absolute; width: 34px;}


.tete{position: absolute; width: 100px; height: 140px; background: #ff9999; -webkit-border-radius:40px 40px 80px 80px/40px 40px 80px 80px; border-radius:100px 100px 150px 150px/100px 100px 150px 150px;-moz-border-radius:40px 40px 80px 80px/40px 40px 80px 80px;-o-border-radius:40px 40px 80px 80px/40px 40px 80px 80px;}

.cheveux{position: absolute; border-color: transparent transparent black transparent; border-style: solid; border-width: 0px 80px 34px 80px; height: 0; position: absolute; margin-left: 10px; margin-top: 30px; width: 0px;}

.cheveux1{position: absolute; width: 35px; height: 42px; background: black; -webkit-border-radius:80px 80px 80px 80px/40px 40px 40px 40px; border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-moz-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;}

.cheveux2{position:absolute; width: 45px; height: 45px; border: 0px; border-top: 8px solid black; 
border-top-left-radius:45px; border-top-right-radius:45px; border-bottom-right-radius:45px; border-bottom-left-radius:45px;}

.nez{position: absolute; width: 70px; height: 35px; background: #ff9999; -webkit-border-radius:80px 80px 80px 80px/40px 40px 40px 40px; border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-moz-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;}

.oreille{position: absolute; width: 40px; height: 45px; background: #ff9990; -webkit-border-radius:80px 80px 80px 80px/40px 40px 40px 40px; border-radius:45px 45px 45px 45px/40px 40px 40px 40px;-moz-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;-o-border-radius:80px 80px 80px 80px/40px 40px 40px 40px;}


.moustache{position: absolute; border-color: black transparent transparent transparent; border-style: solid; border-width: 80px 8px 34px 0px; height: 0; position: absolute; margin-left: 10px; margin-top: 30px; width: 0px;}

.oeil{position: absolute; width: 20px; height: 7px; background: white; -webkit-border-radius:10px 10px 40px 40px/10px 10px 40px 40px; border-radius:10px 10px 40px 40px/10px 10px 40px 40px;-moz-border-radius:10px 10px 40px 40px/10px 10px 40px 40px;-o-border-radius:10px 10px 40px 40px/10px 10px 40px 40px;border-top: solid 2px black;}

.pupille{position: absolute; width: 4px; height: 3px; background: #ff9999; -webkit-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;border-radius:0px 0px 0px 0px/0px 0px 0px 0px;-moz-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;-o-border-radius:0px 0px 0px 0px/0px 0px 0px 0px;}

.bouche{position:absolute; width: 70px; height: 40px; border: 0px; border-bottom: 3px solid #ff3300; 
border-top-left-radius:40px; border-top-right-radius:40px; border-bottom-right-radius:80px; border-bottom-left-radius:80px;}

.fossette{position:absolute; width: 70px; height: 70px; border: 0px; border-left: 1px solid black; border-top: 1px solid black;
border-top-left-radius:70px; border-top-right-radius:70px; border-bottom-right-radius:70px; border-bottom-left-radius:70px;}

.sourcil{position:absolute; width: 27px; height: 30px; border: 0px; border-top: 5px solid black;
border-top-left-radius:30px; border-top-right-radius:7px; border-bottom-right-radius:7px; border-bottom-left-radius:7px;}

.sourcil1{position:absolute; width: 27px; height: 30px; border: 0px; border-top: 5px solid black;
border-top-left-radius:7px; border-top-right-radius:30px; border-bottom-right-radius:7px; border-bottom-left-radius:7px;}

.corps{position: absolute; width: 80px; height: 275px; background: yellow; -webkit-border-radius:40px 40px 40px 40px/40px 40px 40px 40px; border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-o-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;}

.corps1{position: absolute; width: 90px; height: 40px; background: white;border-radius:40px 40px 40px 40px/40px 40px 40px 40px;}

.cou{position: absolute; width: 22px; height: 42px; background: blue;-webkit-border-radius:40px 40px 40px 40px/40px 40px 40px 40px; border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-moz-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;-o-border-radius:40px 40px 40px 40px/40px 40px 40px 40px;}

.trait{position:absolute; width: 55px; height: 25px; background: black; }

.col{position: absolute; border-color: transparent transparent black transparent; border-style: solid; border-width: 32px 24px 40px  32px;width: 18px;}

.col1{position:absolute; width: 15px; height: 25px; background: yellow; }

.col2{position:absolute; width: 12px; height: 25px; background: yellow; }

.bras{position: absolute; width: 20px; height: 140px; background: yellow; -webkit-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px; border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-moz-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-o-border-radius:40px 40px 40px 40px / 80px 80px 80px 80px;border:1px solid black; }

.coude{position: absolute; width: 20px; height: 20px; background: yellow; border-radius:50%;}

.bras1{position: absolute; width: 20px; height: 140px;  border: 0px; border-right: 15px solid yellow; -webkit-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px; border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-moz-border-radius: 40px 40px 40px 40px / 80px 80px 80px 80px;-o-border-radius:40px 40px 40px 40px / 80px 80px 80px 80px; }

.coude1{position: absolute; width: 20px; height: 20px; border: 0px; border-right: 15px solid yellow; border-radius:50%;}


/**********************************/



.grad {
    background: red; 
    background: -webkit-linear-gradient(#ffe5e5, #ff6666); 
    background: -o-linear-gradient(#ffe5e5, #ff6666); 
    background: -moz-linear-gradient(#ffe5e5, #ff6666); 
    background: linear-gradient(#ffe5e5, #ff6666); 
}
.grad1 {
    background: red; 
    background: -webkit-linear-gradient(left,#ffe5e5, #ff6666); 
    background: -o-linear-gradient(left,#ffe5e5, #ff6666); 
    background: -moz-linear-gradient(left,#ffe5e5, #ff6666); 
    background: linear-gradient(left,#ffe5e5, #ff6666); 
}
.grad2 {background: red; background: -webkit-linear-gradient(#ffe5e5, #800000); 
    background: -o-linear-gradient(#ffe5e5, #800000); background: -moz-linear-gradient(#ffe5e5, #800000); 
    background: linear-gradient(#ffe5e5, #800000); }

.grad4 {background: red; background: -webkit-linear-gradient(left,#999999, #000000); 
    background: -o-linear-gradient(left,#999999, #000000); background: -moz-linear-gradient(left,#999999, #000000); 
    background: linear-gradient(left,#999999, #000000); }


.tourne15 { float: left; -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);}
.tourne30 { float: left; -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg);}
.tourne45 { float: left; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.tourne60 { float: left; -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg);}
.tourne75 { float: left; -ms-transform: rotate(75deg); -webkit-transform: rotate(75deg); transform: rotate(75deg);}
.tourne90 { float: left; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.tourne105 { float: left; -ms-transform: rotate(105deg); -webkit-transform: rotate(105deg); transform: rotate(105deg);}
.tourne120 { float: left; -ms-transform: rotate(120deg); -webkit-transform: rotate(120deg); transform: rotate(120deg);}
.tourne135 { float: left; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg);}
.tourne150 { float: left; -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg);}
.tourne165 { float: left; -ms-transform: rotate(165deg); -webkit-transform: rotate(165deg); transform: rotate(165deg);}
.tourne180 { float: left; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.tourne165m { float: left; -ms-transform: rotate(-165deg); -webkit-transform: rotate(-165deg); transform: rotate(-165deg);}
.tourne150m { float: left; -ms-transform: rotate(-150deg); -webkit-transform: rotate(-150deg); transform: rotate(-150deg);}
.tourne135m { float: left; -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
.tourne120m { float: left; -ms-transform: rotate(-120deg); -webkit-transform: rotate(-120deg); transform: rotate(-120deg);}
.tourne105m { float: left; -ms-transform: rotate(-105deg); -webkit-transform: rotate(-105deg); transform: rotate(-105deg);}
.tourne90m { float: left; -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg);}
.tourne75m { float: left; -ms-transform: rotate(-75deg); -webkit-transform: rotate(-75deg); transform: rotate(-75deg);}
.tourne60m { float: left; -ms-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-60deg);}
.tourne45m { float: left; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.tourne30m { float: left; -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); transform: rotate(-30deg);}
.tourne15m { float: left; -ms-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg);}
.tourne5 { float: left; -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg);}
.tourne7 { float: left; -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg);}
.tourne10 { float: left; -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg);}
.tourne20m { float: left; -ms-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg);}
.tourne70 { float: left; -ms-transform: rotate(70deg); -webkit-transform: rotate(70deg); transform: rotate(70deg);}
.tourne70m { float: left; -ms-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg);}
.tourne18 { float: left; -ms-transform: rotate(18deg); -webkit-transform: rotate(18deg); transform: rotate(18deg);}
.tourne22 { float: left; -ms-transform: rotate(22deg); -webkit-transform: rotate(22deg); transform: rotate(22deg);}
.tourne42 { float: left; -ms-transform: rotate(42deg); -webkit-transform: rotate(42deg); transform: rotate(42deg);}
.tourne5m { float: left; -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg);}
.tourne50m { float: left; -ms-transform: rotate(-50deg); -webkit-transform: rotate(-50deg); transform: rotate(-50deg);}
.tourne56m { float: left; -ms-transform: rotate(-56deg); -webkit-transform: rotate(-56deg); transform: rotate(-56deg);}
.tourne80 { float: left; -ms-transform: rotate(80deg); -webkit-transform: rotate(80deg); transform: rotate(80deg);}
.tourne38 { float: left; -ms-transform: rotate(38deg); -webkit-transform: rotate(38deg); transform: rotate(38deg);}
.tourne12m { float: left; -ms-transform: rotate(-12deg); -webkit-transform: rotate(-12deg); transform: rotate(-12deg);}
.tourne215 { float: left; -ms-transform: rotate(215deg); -webkit-transform: rotate(215deg); transform: rotate(215deg);}

</style>
  </head>
  <body>



    <div class="corps" style="margin-left:251px ; margin-top:176px;"></div>
    <div class="corps1 tourne50m" style="margin-left:214px ; margin-top:156px;"></div>
    <div class="col tourne5" style="margin-left:262px ; margin-top:138px;">
    <div class="col1 tourne30" style="left:-7px ; top:-10px;"></div>
    <div class="col2 tourne30m" style="left:8px ; top:-10px;"></div></div>





    <div class="cou grad tourne5" style="margin-left:293px ; margin-top:129px;"></div>
    <div class="trait grad4 tourne5" style="margin-left:264px ; margin-top:245px;"></div>
    <div class="trait grad4 tourne5" style="margin-left:258px ; margin-top:294px;width: 56px;"></div>
    <div class="trait grad4 tourne5" style="margin-left:250px ; margin-top:343px; width: 65px;"></div>
    <div class="trait grad4 tourne5" style="margin-left:246px ; margin-top:392px;width: 74px;"></div>



    <div class="bras tourne10" style="margin-left:240px ; margin-top:202px;"></div>
    <div class="bras " style="margin-left:230px ; margin-top:320px;height: 120px;"></div>
    <div class="coude " style="margin-left:230px ; margin-top:320px;"></div>


    <div class="bras1 " style="margin-left:300px ; margin-top:202px;"></div>
    <div class="bras1 " style="margin-left:300px ; margin-top:320px;height: 120px;"></div>
    <div class="coude1 " style="margin-left:300px ; margin-top:320px;"></div>

    <div class="oreille tourne15m" style="margin-left:360px ; margin-top:55px;opacity:0.7;"></div>
    <div class="menton  tourne15m" style="margin-left:301px ; margin-top:112px;"></div>

    <div class="tete  tourne15m" style="margin-left:281px ; margin-top:20px;"></div>

    <div class="cheveux  tourne5m" style="margin-left:260px ; margin-top:3px;"></div>

    <div class="cheveux1  tourne15m" style="margin-left:259px ; margin-top:43px;"></div>
    <div class="cheveux2  tourne75m" style="margin-left:274px ; margin-top:13px;"></div>
    <div class="cheveux2  " style="margin-left:244px ; margin-top:39px;"></div>
    <div class="fossette tourne15m" style="margin-left:300px ; margin-top:80px;opacity:0.3;"></div>
    <div class="moustache tourne70m" style="margin-left:398px ; margin-top:45px;"></div>
    <div class="moustache tourne60" style="margin-left:296px ; margin-top:62px;"></div>
    <div class="bouche tourne15m" style="margin-left:310px ; margin-top:85px;"></div>
    <div class="nez grad2 tourne15m" style="margin-left:308px ; margin-top:70px;"></div>

    <div class="oreille tourne15m" style="margin-left:252px ; margin-top:75px;"></div>
    <div class="oeil " style="margin-left:347px ; margin-top:60px;">
    <div class="pupille tourne15m" style="left:3px ; top:0px;"></div></div>
    <div class="oeil tourne15m" style="margin-left:308px ; margin-top:68px;">
    <div class="pupille " style="left:3px ; top:0px;"></div></div>
    <div class="sourcil  tourne15m" style="margin-left:299px ; margin-top:43px;"></div>
    <div class="sourcil1  tourne15m" style="margin-left:341px ; margin-top:36px;"></div>


  </body>
</html>