|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<style> |
|
|
.scene-container { |
|
|
width: 100%; |
|
|
height: 800px; |
|
|
background: linear-gradient( |
|
|
to bottom, |
|
|
#1a233a 0%, |
|
|
#2d4065 20%, |
|
|
#4f7ab3 50%, |
|
|
#85b1e0 75%, |
|
|
#b7d9f9 100% |
|
|
); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
.waterfall-container { |
|
|
position: absolute; |
|
|
left: 400px; |
|
|
top: 200px; |
|
|
width: 80px; |
|
|
height: 300px; |
|
|
overflow: hidden; |
|
|
filter: blur(1px); |
|
|
} |
|
|
|
|
|
.waterfall-stream { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 400%; |
|
|
background: repeating-linear-gradient( |
|
|
180deg, |
|
|
rgba(255, 255, 255, 0.8) 0%, |
|
|
rgba(255, 255, 255, 0.2) 15%, |
|
|
rgba(173, 216, 230, 0.4) 25%, |
|
|
rgba(173, 216, 230, 0.6) 35%, |
|
|
rgba(173, 216, 230, 0.8) 45%, |
|
|
rgba(173, 216, 230, 0.6) 55%, |
|
|
rgba(173, 216, 230, 0.4) 65%, |
|
|
rgba(255, 255, 255, 0.2) 85%, |
|
|
rgba(255, 255, 255, 0.8) 100% |
|
|
); |
|
|
animation: waterfall 4s linear infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.mist { |
|
|
position: absolute; |
|
|
width: 120px; |
|
|
height: 60px; |
|
|
left: 380px; |
|
|
bottom: 160px; |
|
|
background: radial-gradient( |
|
|
ellipse at center, |
|
|
rgba(255, 255, 255, 0.6) 0%, |
|
|
rgba(255, 255, 255, 0.3) 40%, |
|
|
rgba(255, 255, 255, 0) 70% |
|
|
); |
|
|
filter: blur(3px); |
|
|
animation: mist 3s ease-in-out infinite alternate; |
|
|
} |
|
|
|
|
|
|
|
|
.river { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 120px; |
|
|
bottom: 100px; |
|
|
background: |
|
|
linear-gradient( |
|
|
90deg, |
|
|
rgba(173, 216, 230, 0.8), |
|
|
rgba(135, 206, 235, 0.9), |
|
|
rgba(173, 216, 230, 0.8) |
|
|
), |
|
|
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,50 Q25,40 50,50 T100,50" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/></svg>'); |
|
|
background-size: 200% 100%, 100px 100px; |
|
|
animation: riverFlow 8s linear infinite; |
|
|
transform: perspective(500px) rotateX(30deg); |
|
|
transform-origin: bottom; |
|
|
} |
|
|
|
|
|
|
|
|
.climber { |
|
|
position: absolute; |
|
|
width: 40px; |
|
|
height: 60px; |
|
|
filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3)); |
|
|
} |
|
|
|
|
|
@keyframes waterfall { |
|
|
0% { transform: translateY(-75%); } |
|
|
100% { transform: translateY(0%); } |
|
|
} |
|
|
|
|
|
@keyframes riverFlow { |
|
|
0% { background-position: 0% 0%, 0 0; } |
|
|
100% { background-position: 200% 0%, 100px 0; } |
|
|
} |
|
|
|
|
|
@keyframes mist { |
|
|
0% { opacity: 0.4; transform: translateY(0); } |
|
|
100% { opacity: 0.7; transform: translateY(-10px); } |
|
|
} |
|
|
|
|
|
@keyframes climb { |
|
|
0% { transform: translate(0, 0) rotate(var(--rotation, 0deg)); } |
|
|
25% { transform: translate(30px, -45px) rotate(var(--rotation, 5deg)); } |
|
|
50% { transform: translate(60px, -90px) rotate(var(--rotation, -5deg)); } |
|
|
75% { transform: translate(90px, -135px) rotate(var(--rotation, 5deg)); } |
|
|
100% { transform: translate(120px, -180px) rotate(var(--rotation, 0deg)); } |
|
|
} |
|
|
|
|
|
.climber1 { left: 300px; top: 500px; animation: climb 8s infinite alternate; --rotation: 0deg; } |
|
|
.climber2 { left: 500px; top: 450px; animation: climb 8s infinite alternate; animation-delay: -2s; --rotation: 5deg; } |
|
|
.climber3 { left: 700px; top: 480px; animation: climb 8s infinite alternate; animation-delay: -4s; --rotation: -5deg; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="scene-container"> |
|
|
|
|
|
<svg width="100%" height="100%" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice"> |
|
|
|
|
|
<defs> |
|
|
<linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%"> |
|
|
<stop offset="0%" style="stop-color:#8B4513"/> |
|
|
<stop offset="25%" style="stop-color:#A0522D"/> |
|
|
<stop offset="50%" style="stop-color:#8B4513"/> |
|
|
<stop offset="75%" style="stop-color:#6B4423"/> |
|
|
<stop offset="100%" style="stop-color:#593122"/> |
|
|
</linearGradient> |
|
|
<filter id="rockTexture"> |
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="5"/> |
|
|
<feDisplacementMap in="SourceGraphic" scale="20"/> |
|
|
</filter> |
|
|
</defs> |
|
|
|
|
|
|
|
|
<path d="M0,200 Q300,100 600,250 T1200,200 V800 H0 Z" |
|
|
fill="url(#rockGradient)" |
|
|
filter="url(#rockTexture)"/> |
|
|
|
|
|
|
|
|
<g transform="translate(0,100)" opacity="0.9"> |
|
|
<path d="M0,300 Q200,250 400,300 T800,280 T1200,300 V800 H0 Z" |
|
|
fill="#8B4513" filter="url(#rockTexture)"/> |
|
|
<path d="M0,400 Q200,350 400,400 T800,380 T1200,400 V800 H0 Z" |
|
|
fill="#A0522D" filter="url(#rockTexture)"/> |
|
|
</g> |
|
|
</svg> |
|
|
|
|
|
|
|
|
<div class="waterfall-container"> |
|
|
<div class="waterfall-stream"></div> |
|
|
</div> |
|
|
<div class="mist"></div> |
|
|
<div class="river"></div> |
|
|
|
|
|
|
|
|
<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"/> |
|
|
|
|
|
<path d="M15,25 L25,25 M18,30 L22,30" |
|
|
stroke="#666" stroke-width="2"/> |
|
|
|
|
|
<path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8" |
|
|
fill="#ff4444"/> |
|
|
|
|
|
<path d="M18,32 Q20,30 22,32" |
|
|
stroke="#888" stroke-width="2" fill="none"/> |
|
|
|
|
|
<path d="M20,32 C30,32 30,0 20,0" |
|
|
stroke="#eee" stroke-width="1" fill="none"/> |
|
|
</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"/> |
|
|
<path d="M15,25 L25,25 M18,30 L22,30" |
|
|
stroke="#666" stroke-width="2"/> |
|
|
<path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8" |
|
|
fill="#4444ff"/> |
|
|
<path d="M18,32 Q20,30 22,32" |
|
|
stroke="#888" stroke-width="2" fill="none"/> |
|
|
<path d="M20,32 C30,32 30,0 20,0" |
|
|
stroke="#eee" stroke-width="1" fill="none"/> |
|
|
</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"/> |
|
|
<path d="M15,25 L25,25 M18,30 L22,30" |
|
|
stroke="#666" stroke-width="2"/> |
|
|
<path d="M15,8 Q20,5 25,8 Q25,12 20,12 Q15,12 15,8" |
|
|
fill="#44ff44"/> |
|
|
<path d="M18,32 Q20,30 22,32" |
|
|
stroke="#888" stroke-width="2" fill="none"/> |
|
|
<path d="M20,32 C30,32 30,0 20,0" |
|
|
stroke="#eee" stroke-width="1" fill="none"/> |
|
|
</svg> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
