brian/laravel-stubs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adding a bubbles in background animation

Browse Source
This commit is contained in:
Brian 2022-11-28 12:30:12 -07:00
parent e27aa8969f
commit a784d44d16
Signed by: brian
GPG Key ID: DE1A5390A3B84CD8
1 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/resources/css/animations/bubbleup.css Normal file
View File

@ -0,0 +1,59 @@
/**
<div class="bubbles-container">
<div class="bubbles">
<span class="animate-bubble" style="style="--i:(random value between 1 and 15);"></span>
<span class="animate-bubble" style="style="--i:(random value between 1 and 15);"></span>
<span class="animate-bubble" style="style="--i:(random value between 1 and 15);"></span>
<span class="animate-bubble" style="style="--i:(random value between 1 and 15);"></span>
<span class="animate-bubble" style="style="--i:(random value between 1 and 15);"></span>
</div>
</div>
**/
.bubbles-container {
background: hsl(216, 57.1%, 11%);
min-height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.bubbles {
position: relative;
display: flex;
}
.bubbles span {
border-radius: 50%;
height: 30px;
margin: 0 4px;
position: relative;
width: 30px;
/*animation: bubble 15s linear infinite;*/
/*animation-name: bubbleup;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: calc(300s / calc(var(--i) * 5));*/
}
.bubbles span:nth-child(odd) {
background: hsl(191, 66.8%, 58.6%);
box-shadow: 0 0 0 10px hsla(191, 66.8%, 58.6%, 0.3), 0 0 50px hsl(191, 66.8%, 58.6%), 0 0 100px hsl(191, 66.8%, 58.6%);
}
.bubbles span:nth-child(even) {
background: hsl(339, 100%, 58.8%);
box-shadow: 0 0 0 10px hsla(339, 100%, 58.8%, 0.3), 0 0 50px hsl(339, 100%, 58.8%), 0 0 100px hsl(339, 100%, 58.8%);
}
.animate-bubble {
animation-name: bubbleup;
animation-duration: calc(300s / calc(var(--i) * 5));
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes bubbleup {
0% { transform: translateY(100px) scale(0); }
100% { transform: translateY(-100px) scale(1); }
}