<div id="slime_conteneur">
<div class="slime" id="slime1">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
<g class="corps">
<path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
C92,0.927,126.153,36.523,126.153,71.798z"/>
</g>
<g class="ombre">
<path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z"/>
</g>
<g class="reflet">
<ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75"/>
</g>
<g class="yeux">
<g>
<path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z"/>
<circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583"/>
<path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z"/>
<circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583"/>
</g>
</g>
<g class="bouche">
<g>
<path fill="#A862A6">
<animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
</path>
<path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
C52.679,84.25,52.656,84.25,52.678,84.25z"/>
</g>
</g>
</svg>
</div>
<div class="slime" id="slime2">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
<g class="corps">
<path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
C92,0.927,126.153,36.523,126.153,71.798z"/>
</g>
<g class="ombre">
<path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z"/>
</g>
<g class="reflet">
<ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75"/>
</g>
<g class="yeux">
<g>
<path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z"/>
<circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583"/>
<path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z"/>
<circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583"/>
</g>
</g>
<g class="bouche">
<g>
<path fill="#A862A6">
<animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
</path>
<path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
C52.679,84.25,52.656,84.25,52.678,84.25z"/>
</g>
</g>
</svg>
</div>
<div class="slime" id="slime3">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
<g class="corps">
<path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
C92,0.927,126.153,36.523,126.153,71.798z"/>
</g>
<g class="ombre">
<path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z"/>
</g>
<g class="reflet">
<ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75"/>
</g>
<g class="yeux">
<g>
<path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z"/>
<circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583"/>
<path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z"/>
<circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583"/>
</g>
</g>
<g class="bouche">
<g>
<path fill="#A862A6">
<animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
</path>
<path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
C52.679,84.25,52.656,84.25,52.678,84.25z"/>
</g>
</g>
</svg>
</div>
<div class="slime" id="slime4">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="125px" height="100px" viewBox="0 0 126.75 103.25" enable-background="new 0 0 126.75 103.25" xml:space="preserve">
<g class="corps">
<path d="M126.153,71.798c0,35.275-30.128,31.452-65.403,31.452S0.411,107.073,0.411,71.798S34,0.927,63.282,0.927
C92,0.927,126.153,36.523,126.153,71.798z"/>
</g>
<g class="ombre">
<path opacity="0.1" d="M98.583,98.968c0,5.085-4.708,4.313-37.833,4.313c-29.563,0-32.769,0.771-32.769-4.313
c0-8.718,18.86-10.218,35.301-10.218C79.407,88.75,98.583,91.125,98.583,98.968z"/>
</g>
<g class="reflet">
<ellipse transform="matrix(0.5486 -0.8361 0.8361 0.5486 20.2905 77.5842)" opacity="0.5" fill="#FFFFFF" cx="82" cy="20" rx="7.75" ry="13.75"/>
</g>
<g class="yeux">
<g>
<path d="M36.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C42.917,69.307,40.193,66.583,36.833,66.583z M39.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C41.083,70.541,40.375,71.25,39.5,71.25z"/>
<circle fill="#FFFFFF" cx="39.5" cy="69.667" r="1.583"/>
<path d="M88.833,66.583c-3.359,0-6.083,2.724-6.083,6.083c0,3.359,2.724,6.083,6.083,6.083c3.36,0,6.083-2.724,6.083-6.083
C94.917,69.307,92.193,66.583,88.833,66.583z M91.5,71.25c-0.874,0-1.583-0.709-1.583-1.583c0-0.875,0.709-1.583,1.583-1.583
c0.875,0,1.583,0.709,1.583,1.583C93.083,70.541,92.375,71.25,91.5,71.25z"/>
<circle fill="#FFFFFF" cx="91.5" cy="69.667" r="1.583"/>
</g>
</g>
<g class="bouche">
<g>
<path fill="#A862A6">
<animate id="animBouche" attributeName="d" dur="3s" repeatCount="indefinite" values="M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z;
M49.9,73c0,3.151,1.885,10.435,4.528,12c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-8.849,4.528-12H65.584H49.9z;
M49.9,78c0,3.151,1.885,5.435,4.528,7c3.228-1.911,7.589-2.749,11.072-2.749S73.344,83.089,76.572,85
c2.643-1.565,4.528-3.849,4.528-7H65.584H49.9z" />
</path>
<path fill="#E0B7E5" d="M52.678,84.25c7.116,3.558,15.028,3.558,22.144,0C68.463,80.485,59.037,80.485,52.678,84.25
C52.679,84.25,52.656,84.25,52.678,84.25z"/>
</g>
</g>
</svg>
</div>
</div>body{
margin: 0;
}
body,html{
height:100%;
}
#slime_conteneur{
display: inline-block;
text-align: center;
width: 100%;
margin-top: 10%;
}
.slime{
display: inline-block;
width:125px;
height:100px;
margin:auto;
padding:5px 20px;
-webkit-animation: respire 3s;
animation: respire 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
@-webkit-keyframes respire
{
0% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1) scaleY(1);}
50% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1.05) scaleY(0.95);}
100% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1) scaleY(1);}
}
@keyframes respire
{
0% {transform-origin: 50% 100%;transform : scaleX(1) scaleY(1);}
50% {transform-origin: 50% 100%;transform : scaleX(1.05) scaleY(0.95);}
100% {transform-origin: 50% 100%;transform : scaleX(1) scaleY(1);}
}
.slime:hover{
-webkit-animation: changeForme 1s;
animation: changeForme 1s;
/*animation-iteration-count: infinite;*/
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
@-webkit-keyframes changeForme
{
0% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1) scaleY(1);}
40% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(0.8) scaleY(1.2);}
50% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1.2) scaleY(0.8);}
60% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(0.9) scaleY(1.1);}
70% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1.2) scaleY(0.8);}
80% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(0.9) scaleY(1.1);}
90% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1.2) scaleY(0.8);}
100% {-webkit-transform-origin: 50% 100%;-webkit-transform : scaleX(1) scaleY(1);}
}
@keyframes changeForme
{
0% {transform-origin: 50% 100%;transform : scaleX(1) scaleY(1);}
40% {transform-origin: 50% 100%;transform : scaleX(0.8) scaleY(1.2);}
50% {transform-origin: 50% 100%;transform : scaleX(1.2) scaleY(0.8);}
60% {transform-origin: 50% 100%;transform : scaleX(0.9) scaleY(1.1);}
70% {transform-origin: 50% 100%;transform : scaleX(1.2) scaleY(0.8);}
80% {transform-origin: 50% 100%;transform : scaleX(0.9) scaleY(1.1);}
90% {transform-origin: 50% 100%;transform : scaleX(1.2) scaleY(0.8);}
100% {transform-origin: 50% 100%;transform : scaleX(1) scaleY(1);}
}
.slime .yeux {
-webkit-animation: cligneYeux 3s;
animation: cligneYeux 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
@-webkit-keyframes cligneYeux
{
0% {-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transform : scaleY(1);transform : scaleY(1);}
70% {-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transform : scaleY(1);transform : scaleY(1);}
80% {-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transform : scaleY(0.2);transform : scaleY(0.2);}
90% {-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transform : scaleY(1);transform : scaleY(1);}
100% {-webkit-transform-origin: 50% 100%;transform-origin: 50% 100%;-webkit-transform : scaleY(1);transform : scaleY(1);}
}
@keyframes cligneYeux
{
0% {transform-origin: 62.5px 80px;transform : scaleY(1);}
70% {transform-origin: 62.5px 80px;transform : scaleY(1);}
80% {transform-origin: 62.5px 80px;transform : scaleY(0.2);}
90% {transform-origin: 62.5px 80px;transform : scaleY(1);}
100% {transform-origin: 62.5px 80px;transform : scaleY(1);}
} //Colors from : http://flatuicolors.com/
function changeFond(){
var couleurFond;
var numFond = Math.floor((Math.random() * 10) + 1);
switch (numFond) {
case 1:
couleurFond = "#ff0082";
break;
case 2:
couleurFond = "#ff3da0";
break;
case 3:
couleurFond = "#da4a4a";
break;
case 4:
couleurFond = "#ffe1e1";
break;
case 5:
couleurFond = "#bb0060";
break;
case 6:
couleurFond = "#70dfdf";
break;
case 7:
couleurFond = "#da0101";
break;
case 8:
couleurFond = "#c0392b";
break;
case 9:
couleurFond = "#bdc3c7";
break;
case 10:
couleurFond = "#7f8c8d";
break;
}
document.body.style.background = couleurFond;
}
function changeCouleur(){
var tabNum=[];
while (tabNum.length<4){
var numSlime = Math.floor((Math.random() * 10) + 1);
if (tabNum.indexOf(numSlime) == -1){
tabNum.push(numSlime);
}
}
for (var i = 0; i < 4; i++) {
var couleurSlime;
var corpsSlime = document.getElementsByClassName("corps");
switch (tabNum[i]) {
case 1:
couleurSlime = "#1abc9c";
break;
case 2:
couleurSlime = "#2ecc71";
break;
case 3:
couleurSlime = "#3498db";
break;
case 4:
couleurSlime = "#9b59b6";
break;
case 5:
couleurSlime = "#34495e";
break;
case 6:
couleurSlime = "#f1c40f";
break;
case 7:
couleurSlime = "#e67e22";
break;
case 8:
couleurSlime = "#e74c3c";
break;
case 9:
couleurSlime = "#ecf0f1";
break;
case 10:
couleurSlime = "#95a5a6";
break;
}
corpsSlime[i].style.fill = couleurSlime;
}
}
changeFond();
changeCouleur();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.