|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style> |
|
.scene-container { |
|
width: 100%; |
|
height: 800px; |
|
background: linear-gradient(#1B4B8A, #3A6FB0 40%, #87CEEB 70%); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
|
|
:root { |
|
--water-blue-1: rgba(173, 216, 230, 0.7); |
|
--water-blue-2: rgba(135, 206, 235, 0.6); |
|
--water-white-1: rgba(255, 255, 255, 0.5); |
|
--water-white-2: rgba(240, 248, 255, 0.4); |
|
} |
|
|
|
.waterfall-container { |
|
position: absolute; |
|
left: 400px; |
|
top: 200px; |
|
width: 120px; |
|
height: 300px; |
|
overflow: visible; |
|
} |
|
|
|
.river-container { |
|
position: absolute; |
|
bottom: 100px; |
|
left: 0; |
|
width: 100%; |
|
height: 120px; |
|
transform: perspective(1000px) rotateX(30deg); |
|
transform-origin: bottom; |
|
overflow: hidden; |
|
} |
|
|
|
.impact-zone { |
|
position: absolute; |
|
left: 380px; |
|
bottom: 220px; |
|
width: 160px; |
|
height: 80px; |
|
overflow: visible; |
|
} |
|
|
|
.water-shape { |
|
position: absolute; |
|
border-radius: 50%; |
|
opacity: 0; |
|
} |
|
|
|
.waterfall-drop { |
|
animation: waterfall-fall var(--fall-duration, 1.5s) linear infinite; |
|
} |
|
|
|
.impact-splash { |
|
animation: splash var(--splash-duration, 1s) ease-out infinite; |
|
} |
|
|
|
.river-swirl { |
|
animation: river-flow var(--flow-duration, 4s) linear infinite; |
|
} |
|
|
|
@keyframes waterfall-fall { |
|
0% { |
|
transform: translate(var(--start-x, 0), -100%) scale(1); |
|
opacity: 0; |
|
} |
|
10% { opacity: var(--opacity, 0.6); } |
|
90% { opacity: var(--opacity, 0.6); } |
|
100% { |
|
transform: translate(var(--end-x, 0), 100%) scale(var(--end-scale, 0.8)); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@keyframes splash { |
|
0% { |
|
transform: translate(var(--start-x, 0), 0) scale(0.2); |
|
opacity: 0; |
|
} |
|
40% { |
|
opacity: var(--opacity, 0.6); |
|
transform: translate(var(--end-x, 0), var(--y-offset, 0)) scale(1); |
|
} |
|
100% { |
|
transform: translate(var(--final-x, 0), var(--final-y, 0)) scale(1.5); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@keyframes river-flow { |
|
0% { |
|
transform: translate(-100%, var(--y-pos, 0)) rotate(0deg); |
|
opacity: 0; |
|
} |
|
10% { opacity: var(--opacity, 0.6); } |
|
90% { opacity: var(--opacity, 0.6); } |
|
100% { |
|
transform: translate(200%, var(--y-pos, 0)) rotate(360deg); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
.climber { |
|
position: absolute; |
|
width: 40px; |
|
height: 60px; |
|
animation: bounce 1.2s infinite ease-in-out; |
|
} |
|
|
|
@keyframes bounce { |
|
0%, 100% { transform: translateY(0); } |
|
50% { transform: translateY(-20px); } |
|
} |
|
|
|
.climber1 { left: 300px; top: 200px; animation-delay: -0.2s; } |
|
.climber2 { left: 500px; top: 180px; animation-delay: -0.5s; } |
|
.climber3 { left: 700px; top: 220px; animation-delay: -0.8s; } |
|
</style> |
|
</head> |
|
<body> |
|
<div class="scene-container"> |
|
|
|
<svg width="100%" height="100%" viewBox="0 0 1200 800"> |
|
<path d="M0,300 L200,100 L300,250 L400,80 L500,220 L600,100 L700,240 L800,120 L1000,280 L1200,150 L1200,800 L0,800 Z" |
|
fill="#8B4513"/> |
|
</svg> |
|
|
|
|
|
<svg class="climber climber1" viewBox="0 0 40 60"> |
|
<path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50" |
|
stroke="#333" stroke-width="3" stroke-linecap="round"/> |
|
<circle cx="20" cy="8" r="6" fill="#ff4444"/> |
|
</svg> |
|
<svg class="climber climber2" viewBox="0 0 40 60"> |
|
<path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50" |
|
stroke="#333" stroke-width="3" stroke-linecap="round"/> |
|
<circle cx="20" cy="8" r="6" fill="#4444ff"/> |
|
</svg> |
|
<svg class="climber climber3" viewBox="0 0 40 60"> |
|
<path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50" |
|
stroke="#333" stroke-width="3" stroke-linecap="round"/> |
|
<circle cx="20" cy="8" r="6" fill="#44ff44"/> |
|
</svg> |
|
|
|
|
|
<div class="waterfall-container"></div> |
|
<div class="impact-zone"></div> |
|
<div class="river-container"></div> |
|
|
|
<script> |
|
|
|
function createWaterSystem() { |
|
const waterfall = document.querySelector('.waterfall-container'); |
|
const impactZone = document.querySelector('.impact-zone'); |
|
const river = document.querySelector('.river-container'); |
|
|
|
|
|
function createWaterfallDrop() { |
|
const drop = document.createElement('div'); |
|
drop.className = 'water-shape waterfall-drop'; |
|
const size = 10 + Math.random() * 30; |
|
drop.style.cssText = ` |
|
width: ${size}px; |
|
height: ${size}px; |
|
background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'}); |
|
left: ${Math.random() * 100}%; |
|
--fall-duration: ${1 + Math.random()}s; |
|
--opacity: ${0.4 + Math.random() * 0.3}; |
|
--start-x: ${-10 + Math.random() * 20}px; |
|
--end-x: ${-20 + Math.random() * 40}px; |
|
--end-scale: ${0.6 + Math.random() * 0.4}; |
|
filter: blur(${1 + Math.random() * 2}px); |
|
`; |
|
waterfall.appendChild(drop); |
|
drop.addEventListener('animationend', () => drop.remove()); |
|
} |
|
|
|
|
|
function createSplash() { |
|
const splash = document.createElement('div'); |
|
splash.className = 'water-shape impact-splash'; |
|
const size = 15 + Math.random() * 40; |
|
splash.style.cssText = ` |
|
width: ${size}px; |
|
height: ${size}px; |
|
background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'}); |
|
left: ${Math.random() * 100}%; |
|
--splash-duration: ${0.8 + Math.random() * 0.4}s; |
|
--opacity: ${0.3 + Math.random() * 0.4}; |
|
--y-offset: ${-10 - Math.random() * 20}px; |
|
--final-y: ${-20 - Math.random() * 30}px; |
|
--final-x: ${-30 + Math.random() * 60}px; |
|
filter: blur(${2 + Math.random() * 2}px); |
|
`; |
|
impactZone.appendChild(splash); |
|
splash.addEventListener('animationend', () => splash.remove()); |
|
} |
|
|
|
|
|
function createRiverSwirl() { |
|
const swirl = document.createElement('div'); |
|
swirl.className = 'water-shape river-swirl'; |
|
const size = 20 + Math.random() * 50; |
|
swirl.style.cssText = ` |
|
width: ${size}px; |
|
height: ${size}px; |
|
background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'}); |
|
top: ${Math.random() * 100}%; |
|
--flow-duration: ${4 + Math.random() * 3}s; |
|
--opacity: ${0.3 + Math.random() * 0.4}; |
|
--y-pos: ${-20 + Math.random() * 40}px; |
|
filter: blur(${1 + Math.random() * 3}px); |
|
`; |
|
river.appendChild(swirl); |
|
swirl.addEventListener('animationend', () => swirl.remove()); |
|
} |
|
|
|
|
|
setInterval(createWaterfallDrop, 100); |
|
setInterval(createSplash, 150); |
|
setInterval(createRiverSwirl, 200); |
|
} |
|
|
|
createWaterSystem(); |
|
</script> |
|
</div> |
|
</body> |
|
</html> |
