|
|
|
|
|
def create_snow_effect(): |
|
|
|
snow_css = """ |
|
@keyframes snowfall { |
|
0% { |
|
transform: translateY(-10vh) translateX(0); |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: translateY(100vh) translateX(100px); |
|
opacity: 0.3; |
|
} |
|
} |
|
.snowflake { |
|
position: fixed; |
|
color: white; |
|
font-size: 1.5em; |
|
user-select: none; |
|
z-index: 1000; |
|
pointer-events: none; |
|
animation: snowfall linear infinite; |
|
} |
|
""" |
|
|
|
|
|
snow_js = """ |
|
function createSnowflake() { |
|
const snowflake = document.createElement('div'); |
|
snowflake.innerHTML = 'โ'; |
|
snowflake.className = 'snowflake'; |
|
snowflake.style.left = Math.random() * 100 + 'vw'; |
|
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; |
|
snowflake.style.opacity = Math.random(); |
|
document.body.appendChild(snowflake); |
|
|
|
setTimeout(() => { |
|
snowflake.remove(); |
|
}, 5000); |
|
} |
|
setInterval(createSnowflake, 200); |
|
""" |
|
|
|
|
|
snow_html = f""" |
|
<style> |
|
{snow_css} |
|
</style> |
|
<script> |
|
{snow_js} |
|
</script> |
|
""" |
|
|
|
return gr.HTML(snow_html) |
|
|
|
|
|
|
|
create_snow_effect() |