hhl_project/css/louisgame.css

  body {
    background-image: url('../asset/pic/louis16/LouisXVI_Restaurant.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;
    height: 884px!important;
    width: 883px!important;
    top: 204px!important;
    left: 40px!important;
  }
  #restaurant .dish img {
    position: absolute;
    top: 750px;
    width: 150px;
    height: 150px;
    z-index: 3;
  }

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

  #louis img{ /* louis 16 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #louis1 img{ /* 断头台 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #louis2 img{ /* 死 */
    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;
  }
  #champagne img{ /* 香槟 */
    left: -10px;
    
    display: none;
  }
  #cheese img{ /* 芝士 */
    left: 159px;
    display: none;
    top: 734px!important;
    width: 182px!important;
    height: 207px!important;
  }
  #crepe img{ 
  
    display: none;
    left: 347px;
    top: 735px!important;
    width: 194px!important;
    height: 202px!important;
  }
  #foie-gras img{
    left: 563px;
    display: none;
    top: 750px!important;
    width: 190px!important;
    height: 191px!important;
    z-index: 3!important;
  }
  #onion-soup img{
    left: 750px;
    top: 725px!important;
    width: 200px!important;
    height: 207px!important;
    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;
}