Violet/Violets-Purgatory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Change card with rain event

Browse source
This commit is contained in:
Violet 2024-03-04 17:12:08 +00:00 committed by GitHub
parent c23e8fef0a
commit 9790b71264
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
static/root.css
View file

@ -11,8 +11,7 @@
} }
#card { #card {
background-color: rgba(25, 5, 80, 0.5); background-color: rgba(20, 5, 90);
backdrop-filter: blur(10px);
padding: 15px; padding: 15px;
border: 2px white solid; border: 2px white solid;
margin: 20px auto; margin: 20px auto;

10
weatherGenerator.js
View file

@ -8,6 +8,10 @@ module.exports = {
html += html +=
` `
<style> <style>
#card {
background-color: rgba(45, 5, 120, 0.2);
backdrop-filter: blur(5px);
}
.rainStuff { .rainStuff {
position: sticky; position: sticky;
top: 0; top: 0;
@ -28,7 +32,7 @@ module.exports = {
position: absolute; position: absolute;
width: 5px; width: 5px;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
background-color: rgba(0, 0, 255, 0.1); background-color: rgba(0, 0, 255, 0.2);
height: 10vh; height: 10vh;
visibility: hidden; visibility: hidden;
} }
@ -57,12 +61,12 @@ module.exports = {
.rainDrop:nth-of-type(${index + 1}) { .rainDrop:nth-of-type(${index + 1}) {
animation: rainAnim${index} ${(Math.random() * 0.3) + (5 - iterationReducer)}s linear; animation: rainAnim${index} ${(Math.random() * 0.3) + (5 - iterationReducer)}s linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-delay: ${Math.random()}s; animation-delay: ${Math.round(Math.random() * 100) / 100}s;
} }
` `
var randos = [] var randos = []
for (let index = 0; index < 11; index++) { for (let index = 0; index < 11; index++) {
randos.push(Math.random() * 100) randos.push(Math.round(Math.random() * 100))
} }
html += `@keyframes rainAnim${index} { ` html += `@keyframes rainAnim${index} { `