цикл день-ночь, кролики, кровавая луна
This commit is contained in:
+86
-25
@@ -199,6 +199,23 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.health-bar {
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
height: 5px;
|
||||
transform: translate(-50%, -100%);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid #1b1611;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.health-bar__fill {
|
||||
height: 100%;
|
||||
background: #4caf50;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.entity {
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -250,6 +267,24 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.entity.rabbit-shadow {
|
||||
width: 18px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
margin: 32px 10px 0px 0px;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.entity.meat-shadow {
|
||||
width: 18px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
margin: 7px 0px 0px 0px;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.entity.tree {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
@@ -264,6 +299,13 @@
|
||||
margin: -8px;
|
||||
}
|
||||
|
||||
.entity.rabbit {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
padding: 6px;
|
||||
margin: -6px;
|
||||
}
|
||||
|
||||
.entity.chopping svg {
|
||||
animation: chop-shake 0.12s infinite;
|
||||
}
|
||||
@@ -276,37 +318,56 @@
|
||||
animation: walk-bob 0.3s infinite steps(2);
|
||||
}
|
||||
|
||||
.next-level-btn {
|
||||
.day-night-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.blood-moon-banner {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 16px 24px;
|
||||
background: var(--panel-bg);
|
||||
border: 4px solid var(--accent);
|
||||
color: var(--accent);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
text-shadow: 2px 2px 0 var(--panel-border);
|
||||
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
|
||||
cursor: pointer;
|
||||
animation: next-level-pop 0.6s ease-out;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
font-size: 24px;
|
||||
color: #e63946;
|
||||
text-shadow: 3px 3px 0 #2a0505;
|
||||
animation: blood-moon-pulse 1s ease-in-out infinite;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.next-level-btn:hover {
|
||||
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
|
||||
margin: -4px 0px 0px -4px;
|
||||
}
|
||||
|
||||
@keyframes next-level-pop {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(0.85);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
@keyframes blood-moon-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.75;
|
||||
transform: translateX(-50%) scale(1.08);
|
||||
}
|
||||
}
|
||||
|
||||
.game-over-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.game-over-overlay__message {
|
||||
font-size: 16px;
|
||||
color: var(--accent);
|
||||
text-shadow: 2px 2px 0 var(--panel-border);
|
||||
text-align: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
@keyframes chop-shake {
|
||||
|
||||
Reference in New Issue
Block a user