html,body{ font-family: "仿宋", serif; font-weight: 0; margin: 0; padding: 0; border: 0; font-size: 0; background: #9bba5a; color: rgba(0, 0, 0, 0.75); user-select:none; } @keyframes foodRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .food{ animation: foodRotate 3s linear infinite; display: inline-block; position: relative; } .foodSingle{ background-color: rgba(0, 0, 0, 0.75); height: 8px; width: 8px; border-radius: 50%; display: inline-block; } .map{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; outline:5px rgba(75, 74, 74, 0.83) solid; } .mapTextName{ font-size: 150px; position: absolute; top: 10%; left: 20%; } .mapTextStart{ position: absolute; bottom: 25%; left: 17%; } .mapTextStart div{ font-size: 80px; cursor: pointer; border-radius: 5%; display: inline-block; margin-right: 10px; } .mapTextStart div:hover{ color: #9bba5a; background-color: rgba(0, 0, 0, 0.75);; } .mapBlock{ display: inline-block; } .snake{ position: absolute; display: inline-block; border-radius: 25%; } .playerOne{ position: absolute; font-size: 40px; top:5%; left: 3%; display: none; } .playerOne p{ display: inline-block; margin: 10px 0; } .playerOne p{ display: inline-block; } .playerTwo{ position: absolute; font-size: 40px; top:5%; right: 2%; display: none; } .playerTwo p{ display: inline-block; margin: 10px 0; } .diePanelInfo{ position: absolute; left: 30%; top: 20%; font-size: 80px; display: none; } .diePanelInfo p{ display: inline-block; margin: 10px 0; } .diePanelPick{ position: absolute; bottom: 15%; left: 15%; font-size: 70px; display: none; } .diePanelPick div{ cursor: pointer; border-radius: 5%; display: inline-block; margin-right: 10px; } .diePanelPick div:hover{ color: #9bba5a; background-color: rgba(0, 0, 0, 0.75); }