hhl_project/css/qinshihuanggame.css

  body {
    background-image: url('../asset/pic/qinshihuang/background.png'); 
    background-repeat: no-repeat;
    background-color: rgb(0, 136, 109);
  }
  #desktop{
    position: absolute;
    background-repeat: no-repeat;
  }
  #desktop img{
    left: -10px;
    top: -10px;
    position: absolute;
    z-index: 2;
  }
  #restaurant .customer img {
    position: absolute;
    z-index: 0;
    width: 1024px;
    height: 1024px;
    top:50px;
    left: -100px;
  }
  #restaurant .dish img {
    position: absolute;
    top: 700px;
    width: 250px;
    height: 250px;
    z-index: 3;
  }

  #restaurant .empire img {
    position: absolute;
    width: 800px;
    height: 800px;
    z-index: 4;
  }

  #qinshihuang img{ /* 秦始皇 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #qinshihuang1 img{ /* 秦始皇死法1 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #qinshihuang2 img{ /* 秦始皇死法2 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #qinshihuang3 img{ /* 秦始皇死法3 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #dialogueBox {
    position: absolute;
    width: 512px;
    height: 512px;
    top: 50px;
    left: 600px;
  }
  #dialogueBox img{
    position: absolute;
    
    width: 800px;
    height: 800px;
    top: -100px;
    left: -100px;
    display: none;
  }
  #dialogueText {
    position: absolute;
    top: 170px;
    left: 100px;
    width: 400px;
    height: 150px;
    font-size: 25px;
    text-align: center; /* 水平居中 */
    
  }
  #hint {
    position: absolute;
    
    width: 50px;
    height: 50px;
    top: 350px;
    left: 1100px;
    
  }
#hint img{
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 5;
    display: none;
  }
  #hintpage img{
    position: absolute;
    z-index: 5;
    display: none;
  }
  #customer1 img{ /* 中年男 */
    display: none;
  }
  #customer1-2 img{ /* unhappy中年男 */
    display: none;
  }
  #customer1-3 img{ /* angry中年男 */
    display: none;
  }
  #customer2 img{ /* 小女孩 */
    top:150px !important;
    display: none;
  }
  #customer2-2 img{ /* unhappy小女孩 */
    top:150px !important;
    display: none;
  }
  #customer2-3 img{ /* angry小女孩 */
    top:150px !important;
    display: none;
  }
  #customer3 img{ /* 老奶奶 */
    top:100px !important;
    display: none;
  }
  #customer3-2 img{ /* unhappy老奶奶 */
    top:100px !important;
    display: none;
  }
  #customer3-3 img{ /* unhappy老奶奶 */
    top:100px !important;
    display: none;
  }
  #mapo-tofu img{ /* 麻婆豆腐 */
    left: 630px;
    display: none;
  }
  #roast-duck img{ /* 烤鸭 */
    left: 850px;
    top: 620px !important;
    width: 340px !important;
    height: 340px !important;
    display: none;
  }
  #yangzhou-fried-rice img{ 
    left: 250px;
    top: 730px !important;
    width: 200px !important;
    height: 200px !important;
    display: none;
  }
  #braised-prawns img{
    left: 430px;
    display: none;
  }
  #kung-pao-chicken img{
    display: none;
  }

/* 定义抖动动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake-animation {
    animation: shake 0.8s; /* 动画持续时间 */
    animation-timing-function: ease-in-out;
}