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

feat: finshi demo

Browse Source
This commit is contained in:
sangge 2023-10-29 13:44:30 +08:00
parent 52473f1bfe
commit 18fc2e6942
4 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
chef_no_background.png → chef.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 204 KiB

After

Width:  |  Height:  |  Size: 204 KiB

2
index.html
View File

@ -10,8 +10,10 @@
<body>
<div class="canteen">
<img src="background.png" class="background" alt="Background">
<img src="rice_bucket.png" class="rice_bucket" alt="Rice bucket">
<img src="desktop.png" class="table" alt="Table">
<img src="dinner_plate.png" class="plate" alt="Plate">
<img src="chef.png" class="chef" alt="Chef">
<img src="chef_hand.png" class="chef-hand" alt="Chef's Hand">
<img src="rice.png" class="rice" alt="Rice">
<img src="braised_pork.png" class="meat" alt="Meat">

1
script.js
View File

@ -1,6 +1,7 @@
let step = 0;
function serveFood() {
console.log("click")
switch(step) {
case 0:
document.querySelector('.chef-hand').style.opacity = '1';

45
styles.css
View File

@ -1,16 +1,29 @@
.canteen {
position: relative;
width: 500px;
height: 500px;
margin: 50px auto;
.background {
position: relative;
width: 100%;
z-index: 0;
}
.canteen {
width: 40vw; /* 设置为视口宽度 */
height: 40vw; /* 保持宽高比 */
position: relative;
}
.canteen img {
position: absolute;
width: 100%;
height: 100%;
}
.table {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.plate {
@ -18,7 +31,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
z-index: 3;
}
.chef-hand {
@ -38,7 +51,15 @@
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.5s;
z-index: 2;
z-index: 3;
}
.chef {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
button {
@ -46,4 +67,14 @@ button {
margin: 20px auto;
padding: 10px 20px;
font-size: 18px;
position: relative;
z-index: 10;
}
.rice_bucket{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}