<div class="pikachu">
<div class="eye eye1">
</div>
<div class="eye eye2">
<div class="eyeball"></div>
</div>
<div class="nose">
</div>
<div class="cheek cheek1"></div>
<div class="cheek cheek2"></div>
<div class="mouth"></div>
</div>
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
min-height:100vh;
background: gold;
padding:4rem;
}
.pikachu{
width:100% !important;
max-width:500px;
margin:auto;
height:400px !important;
position:relative;
width:100%;
cursor:pointer;
}
.eye{
width:80px;
height:80px;
border-radius:100%;
position: absolute;
border-width:5px 0 0 0;
border-style:solid;
background: #000;
}
.eye1{
top:0%;
left:30%;
}
.eye2{
top:0%;
left:70%;
}
.eye:before{
content:"";
width:16px;
height:20px;
background: #fff;
border-radius:100%;
position: absolute;
top:calc(40% - 8px);
left:calc(40% - 16px);
}
.eye1:before{
top:calc(40% - 8px);
left:calc(80% - 16px);
}
.pikachu.clicked .eye1{
background: transparent;
}
.pikachu.clicked .eye1:before{
display:none;
}
.cheek{
width:80px;
height:80px;
background:orange;
position: absolute;
border-radius:50%;
top:30%;
}
.cheek1{
left:15%;
}
.cheek2{
left:85%
}
.nose{
width:20px;
height:15px;
border-radius:10px;
background: #000;
position: absolute;
top:25%;
left:50%;
}
.mouth{
position: absolute;
top:40%;
left:50%;
width:150px;
height:30px;
border-width:0 0 4px 0;
border-style:solid;
border-radius:50%;
}
.pikachu *{
transform:translatex(-50%);
}
const pikachu = document.querySelector('.pikachu');
const pikachuSound = document.createElement('audio');
pikachuSound.src = 'https://www.soundboard.com/mediafiles/od/ODcwNzY0MDQzODcwODc1_Ugb8CZehWX0.mp3';
pikachu.addEventListener('click',function(){
this.classList.add('clicked');
pikachuSound.currentTime = 0;
pikachuSound.play();
setTimeout(() => {
this.classList.remove('clicked');
},200)
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.