sangge/hhl_project
1
0
Fork 0
Code Pull Requests Actions Activity

feat: update mirror rice and pork

Browse Source
This commit is contained in:
sangge 2023-10-29 14:09:09 +08:00
parent 18fc2e6942
commit 323b0df7b4
3 changed files with 33 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -17,6 +17,8 @@
<img src="chef_hand.png" class="chef-hand" alt="Chef's Hand"> <img src="chef_hand.png" class="chef-hand" alt="Chef's Hand">
<img src="rice.png" class="rice" alt="Rice"> <img src="rice.png" class="rice" alt="Rice">
<img src="braised_pork.png" class="meat" alt="Meat"> <img src="braised_pork.png" class="meat" alt="Meat">
<img src="rice.png" class="rice-mirror" alt="Rice mirror">
<img src="braised_pork.png" class="meat-mirror" alt="Meat mirror">
</div> </div>
<button onclick="serveFood()">Serve Food</button> <button onclick="serveFood()">Serve Food</button>

22
script.js
View File

@ -1,7 +1,6 @@
let step = 0; let step = 0;
function serveFood() { function serveFood() {
console.log("click")
switch(step) { switch(step) {
case 0: case 0:
document.querySelector('.chef-hand').style.opacity = '1'; document.querySelector('.chef-hand').style.opacity = '1';
@ -17,9 +16,30 @@ function serveFood() {
document.querySelector('.chef-hand').style.opacity = '0'; document.querySelector('.chef-hand').style.opacity = '0';
}, 500); }, 500);
break; break;
case 2:
document.querySelector('.chef-hand').style.opacity = '1';
setTimeout(() => {
document.querySelector('.rice-mirror').style.opacity = '1';
document.querySelector('.chef-hand').style.opacity = '0';
}, 500);
break;
case 3:
document.querySelector('.chef-hand').style.opacity = '1';
setTimeout(() => {
document.querySelector('.meat-mirror').style.opacity = '1';
document.querySelector('.chef-hand').style.opacity = '0';
}, 500);
break;
case 4:
document.querySelector('.rice').style.opacity = '0';
document.querySelector('.meat').style.opacity = '0';
document.querySelector('.rice-mirror').style.opacity = '0';
document.querySelector('.meat-mirror').style.opacity = '0';
step = -1;
default: default:
step = -1; step = -1;
break; break;
} }
step++; step++;
console.log(step);
} }

10
styles.css
View File

@ -54,6 +54,16 @@
z-index: 3; z-index: 3;
} }
.rice-mirror, .meat-mirror {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scaleX(-1);
opacity: 0;
transition: opacity 0.5s;
z-index: 3;
}
.chef { .chef {
position: absolute; position: absolute;
bottom: 0; bottom: 0;