⏩️クリスマスなのでブラウザに雪を降らすJSコードを生成AIで生成.
おはようございます．クリスマスなのでブラウザに雪を降らすJSコードを生成AIで生成.今年も彼女がいないクリスマスを過ごしました.彼女になってくれる人お待ちしております、この姿勢が彼女が出来ない要素なんだということも分かっていますが.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪</title>
<style>
#snowContainer {
position: absolute;
/* 親要素に対する絶対配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
/* 雪が画面外に出ないようにする */
pointer-events: none;
/* 雪がマウスイベントを邪魔しないようにする */
z-index: 9999;
/* 他の要素より前面に表示 */
}
.snowflake {
position: absolute;
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
/* 丸くする */
opacity: 0.7;
/* 少し透明にする */
animation: snowfall linear infinite;
/* アニメーションを指定 */
}
@keyframes snowfall {
0% {
transform: translateY(-10px);
}
/* 開始位置 */
100% {
transform: translateY(100vh);
}
/* 終了位置（画面下部） */
}
html{
background-color: black;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="snowContainer"></div>
<script>
const snowContainer = document.getElementById('snowContainer');
const numSnowflakes = 50; // 雪片の数
for (let i = 0; i < numSnowflakes; i++) {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.style.left = `${Math.random() * 100}vw`; // 横方向のランダムな位置
snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`; // アニメーション速度をランダムに
snowflake.style.animationDelay = `${Math.random()}s`; // アニメーション開始時間をランダムに
snowflake.style.fontSize = `${Math.random() * 10 + 5}px`;
snowContainer.appendChild(snowflake);
}
</script>
</body>
</html>そんな自分でも好きですという奇特な人はいないものかな...(受け身（笑）
そんな自分が生成AIに雪を降らすJSコードを頼んだところ、俊足の解を出してくれました.なんて時代なんだと思いながら出力されたコードをhtmlファイルにペーストしてhtml背景を黒にしてあとは一応、確認.
最後に雪が降っているデモサイトを貼っときます.
明日へ続く
