x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-18 17:29:11 +03:00 committed by GitHub
parent f0a806810a
commit ab7d889e89
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
100_projects/86-white-snow-rain/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>White Snow Rain</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body></body>
</html>

15
100_projects/86-white-snow-rain/script.js Normal file
View File

@ -0,0 +1,15 @@
function createSnow () {
const snow = document.createElement("div");
snow.classList.add("snow");
snow.style.left = Math.random() * 100 + "vw";
snow.style.animationDuration = Math.random() * 2 + 3 + "s";
snow.innerText = "❄️️";
document.body.appendChild(snow);
setTimeout(() => {
snow.remove();
}, 5000);
}
setInterval(createSnow, 300);

23
100_projects/86-white-snow-rain/style.css Normal file
View File

@ -0,0 +1,23 @@
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: #ADD8E6;
}
.snow {
position: fixed;
top: -1vh;
font-size: 2rem;
transform: translateY(0);
animation: fall 3s linear forwards;
}
@keyframes fall {
to {
transform: translateY(105vh);
}
}