html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="div1" onclick="HeadColorChange(),BodyColorChange(),RHCCh(),LHCCh(),HCCh(),RLCCh(),LLCCh()">
<div class="head">. .</div>
<div class="body"></div>
<div class="ears"></div>
<div class="ears2"></div>
<div class="RightHand"></div>
<div class="LeftHand"></div>
<div class="Hood"></div>
<div class="RightLeg"></div>
<div class="LeftLeg"></div>
</div>
</body>
</html>
</head>
<body>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
}
.div1{
width:80%;
height:500px; background-color:rgb(111,33,235);
border-radius:50px;
border:12px solid black;
transition:all 2s ease;
}
.head{
width:140px;
height:140px;
border-radius:50%; background-color:rgb(255,255,200);
position:absolute ;
transform:translate(80px , 100px);
transition:all 2s ease;
justify-content:center;
align-items:center;
display:flex;
font-size:90px;
}
.body{
background-color:rgb(255,255,200);
width:30px;
height:200px;
border-radius:20px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function HeadColorChange(){
var c= document.querySelector(".head")
c.classList.toggle("headcss")
}
function BodyColorChange(){
var b= document.querySelector(".body")
b.classList.toggle("bodycss")
}
function RHCCh(){
var r= document.querySelector(".RightHand")
r.classList.toggle("RHcss")
}
function LHCCh(){
var l= document.querySelector(".LeftHand")
l.classList.toggle("LHcss")
}
function HCCh(){
var h= document.querySelector(".Hood")
h.classList.toggle("hoodcss")
}
function RLCCh(){
var i= document.querySelector(".RightLeg")
i.classList.toggle("RLcss")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run