Jo Dalton en CSS


<!DOCTYPE html>
<html>
  <head>
    <title>Jo 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: 107px 34px 0px; height: 0; position: absolute; width: 34px;}


.tete{position: absolute; width: 100px; height: 110px; 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; width: 130px; height: 25px; border: 0px; border-top: 25px solid #000000; border-radius:50%;}

.cheveux1{position: absolute; width: 14px; height: 47px; background: #000000; -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: 30px; height: 35px; 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: 32px; 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: 50px; height: 50px; border: 0px; border-left: 1px solid black;
border-top-left-radius:170px; border-top-right-radius:170px; border-bottom-right-radius:70px; border-bottom-left-radius:70px;}

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

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

.corps{position: absolute; display:block; width: 48px; height: 108px; background-color: yellow; 
-webkit-border-radius: 48px 48px 48px 48px / 48px 48px 48px 48px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}

.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: 48px; 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: 17px; height:64px; 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; }

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

.bras1{position: absolute; width: 17px; height: 50px;  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; }

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

.jambe{position: absolute; width: 25px; height:82px; 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; }
/**********************************/



.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);}
.tourne22m { 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:281px ; margin-top:590px;"></div>
    <div class="bras tourne22" style="margin-left:264px ; margin-top:580px;"></div>
    <div class="bras tourne22m" style="margin-left:328px ; margin-top:580px;"></div>
    <div class="bras1 tourne22m" style="margin-left:258px ; margin-top:628px;"></div>
    <div class="bras1 tourne22" style="margin-left:334px ; margin-top:628px;"></div>
    <div class="jambe tourne5" style="margin-left:277px ; margin-top:672px;"></div>
    <div class="jambe tourne5m" style="margin-left:309px ; margin-top:672px;"></div>

    <div class="trait grad4" style="margin-left:280px ; margin-top:632px;"></div>
    <div class="trait grad4 tourne22" style="margin-left:262px ; margin-top:600px;width: 17px;"></div>
    <div class="trait grad4 tourne22m" style="margin-left:329px ; margin-top:600px;width: 17px;"></div>





    <div class="oreille" style="margin-left:350px ; margin-top:508px;"></div>
    <div class="menton  " style="margin-left:256px ; margin-top:527px;"></div>
    <div class="tete " style="margin-left:257px ; margin-top:467px;"></div>
    <div class="cheveux" style="margin-left:260px ; margin-top:457px;"></div>
    <div class="cheveux1  tourne15" style="margin-left:258px ; margin-top:468px;"></div>
    <div class="cheveux2  tourne75m" style="margin-left:260px ; margin-top:453px;"></div>
    <div class="cheveux2  " style="margin-left:244px ; margin-top:463px;"></div>
    <div class="fossette tourne15m" style="margin-left:266px ; margin-top:515px;opacity:0.3;"></div>
    <div class="moustache tourne60m" style="margin-left:358px ; margin-top:493px;"></div>
    <div class="moustache tourne60" style="margin-left:252px ; margin-top:493px;"></div>
    <div class="bouche" style="margin-left:274px ; margin-top:518px;"></div>
    <div class="nez grad2" style="margin-left:275px ; margin-top:507px;"></div>
    <div class="oreille" style="margin-left:234px ; margin-top:508px;"></div>
    <div class="oeil " style="margin-left:315px ; margin-top:502px;">
    <div class="pupille" style="left:3px ; top:3px;"></div></div>
    <div class="oeil " style="margin-left:281px ; margin-top:502px;">
    <div class="pupille " style="left:3px ; top:3px;"></div></div>
    <div class="sourcil  " style="margin-left:274px ; margin-top:484px;"></div>
    <div class="sourcil1  " style="margin-left:314px ; margin-top:484px;"></div>


  </body>
</html>