From 18fc2e69421ce454951a7ff5a52decd787879bf8 Mon Sep 17 00:00:00 2001 From: sangge <2251250136@qq.com> Date: Sun, 29 Oct 2023 13:44:30 +0800 Subject: [PATCH] feat: finshi demo --- chef_no_background.png => chef.png | Bin index.html | 2 ++ script.js | 1 + styles.css | 45 ++++++++++++++++++++++++----- 4 files changed, 41 insertions(+), 7 deletions(-) rename chef_no_background.png => chef.png (100%) diff --git a/chef_no_background.png b/chef.png similarity index 100% rename from chef_no_background.png rename to chef.png diff --git a/index.html b/index.html index ab8f89e..57476f7 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,10 @@
Background + Rice bucket Table Plate + Chef Chef's Hand Rice Meat diff --git a/script.js b/script.js index 0b0243c..91c4b75 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,7 @@ let step = 0; function serveFood() { + console.log("click") switch(step) { case 0: document.querySelector('.chef-hand').style.opacity = '1'; diff --git a/styles.css b/styles.css index 389ba27..db4c0f6 100644 --- a/styles.css +++ b/styles.css @@ -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; }