From 76b818c7f2843794715c4f6e67c4a85e9df92d0c Mon Sep 17 00:00:00 2001
From: kalaSriSaiRaksha <103526228+kalaSriSaiRaksha@users.noreply.github.com>
Date: Sun, 9 Oct 2022 17:50:49 +0530
Subject: [PATCH 1/5] Create index.html
---
CodePen Home CSS Raindrops (Animated)/index.html | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
create mode 100644 CodePen Home CSS Raindrops (Animated)/index.html
diff --git a/CodePen Home CSS Raindrops (Animated)/index.html b/CodePen Home CSS Raindrops (Animated)/index.html
new file mode 100644
index 0000000..9532718
--- /dev/null
+++ b/CodePen Home CSS Raindrops (Animated)/index.html
@@ -0,0 +1,16 @@
+
+
+ Raindrops
+
+
+
+
+
+
+
+
From c2fac855c01e65cdf56e55e3e101bd125edfdce5 Mon Sep 17 00:00:00 2001
From: kalaSriSaiRaksha <103526228+kalaSriSaiRaksha@users.noreply.github.com>
Date: Sun, 9 Oct 2022 17:51:33 +0530
Subject: [PATCH 2/5] Create main.css
---
.../main.css | 166 ++++++++++++++++++
1 file changed, 166 insertions(+)
create mode 100644 CodePen Home CSS Raindrops (Animated)/main.css
diff --git a/CodePen Home CSS Raindrops (Animated)/main.css b/CodePen Home CSS Raindrops (Animated)/main.css
new file mode 100644
index 0000000..6ebbc99
--- /dev/null
+++ b/CodePen Home CSS Raindrops (Animated)/main.css
@@ -0,0 +1,166 @@
+@import 'lesshat';
+
+@image: '//www.planwallpaper.com/static/images/Hawaii-Beach-Wallpaper-HD.jpg';
+
+@width:100vw;
+@height:100vh;
+
+@raindrops: 100; // How many drops
+@brightness: 1.2; // Brightness of drop
+@duration: 30; // Duration of raining loop
+
+@falling-animate: true; // Disable falling animation if you dont want
+@falling-reflect: true; // More realistic, more laggy
+
+
+.rd-container{
+ width:@width;
+ height:@height;
+ position:absolute;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+ margin:auto;
+ overflow:hidden;
+ transform:rotateY(0);
+}
+.rd-window{
+ background:url(@image);
+ background-size:cover;
+ background-position:50%;
+ width:100%;
+ height:100%;
+ transform:rotateY(0);
+ transition:-webkit-filter 600ms;
+ .filter(blur(4px));
+}
+.raindrops{
+ width:@width;
+ height:@height;
+ position:absolute;
+ top:0;
+ left:0;
+ transform:rotateY(0);
+ transition:-webkit-filter 600ms;
+}
+.borders{
+ position:absolute;
+
+}
+@keyframes raindrop-fall{
+ 0% {
+ opacity:0;
+ transform:rotate(180deg) scale(.2,.2) rotateY(0);
+ }
+ 100% {
+ opacity:1;
+ transform:rotate(180deg) scale(1,1) rotateY(0);
+ }
+}
+@keyframes raindrop-falling{
+ 0%, 15% {
+ transform: translateY(0);
+ }
+ 30%, 45% {
+ transform: translate(20vh*0.3, -100vh*0.3);
+ & when (@falling-reflect = true){
+ background-position-y: 30%;
+ }
+ }
+
+ 60%, 70% {
+ transform: translate(20vh*0.6, -100vh*0.6);
+ & when (@falling-reflect = true){
+ background-position-y: 60%;
+ }
+ }
+ 80%, 89% {
+ transform: translate(20vh*0.8, -100vh*0.8);
+ & when (@falling-reflect = true){
+ background-position-y: 80%;
+ }
+ }
+ 100% {
+ transform: translate(20vh, -100vh);
+ & when (@falling-reflect = true){
+ background-position-y: 100%;
+ }
+ }
+}
+@raindrop-fall-transition:.2s cubic-bezier(0.175, 0.885, 0.320, 1.275);
+.raindrop{
+ position:absolute;
+ opacity:0;
+ animation:raindrop-fall @raindrop-fall-transition;
+ animation-fill-mode:forwards;
+ &:before, &:after{
+ min-width: 5px;
+ min-height: 6px;
+ content: " ";
+ display: block;
+ position:absolute;
+ top: 0; left: 0;
+ border-radius: 100%;
+ }
+ &:before{
+ box-shadow: 0.2px -1px 0px 1px rgba(50,50,50,0.6);
+ transform: scale(0.95, 1);
+ }
+ &:after{
+ background:black;
+ background-image:url(@image);
+ background-size: @width*0.05 @height*0.05;
+ transition: background-size 1s;
+ opacity: .6;
+ .filter(brightness(@brightness));
+ }
+}
+
+.raindrop:hover:after{
+ background-size:600%;
+}
+
+.create-randoms(){
+ @x:`Math.random()`;
+ @y:`Math.random()`;
+ @size:2+round(`Math.random()*11`);
+ @stretch:`0.2+Math.random()*20/100`;
+ @drop-height:@size*(1+@stretch);
+ @delay:round(`Math.random()*@{duration}`);
+ @transition:300ms;
+}
+.loop-raindrops(@counter) when (@counter > 0) {
+ .loop-raindrops((@counter - 1)); // next iteration
+
+ body{
+ .create-randoms();
+ .raindrop:nth-child(@{counter}){
+ left:@x*@width;
+ top:@y*@height;
+ animation-delay:@delay*1s;
+ &:before,
+ &:after{
+ width:@size*0.2vw;
+ height:@size*(1+@stretch)*0.2vw;
+ max-width:@size*1px;
+ max-height:@size*(1+@stretch)*1px;
+ background-position: @x*100% @y*100%;
+
+ & when (@falling-animate = true){
+ animation: raindrop-falling 10s+(2/@size)*100s @delay+2s*(10/@size) infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
+ }
+
+ }
+ }
+ }
+}
+
+.loop-raindrops(@raindrops);
+
+.container .raindrops{
+ .filter(blur(0px) brightness(1.3));
+}
+.container .window{
+ .filter(blur(4px));
+}
From b3c01279845f7753103e64977e78b0474375eb16 Mon Sep 17 00:00:00 2001
From: kalaSriSaiRaksha <103526228+kalaSriSaiRaksha@users.noreply.github.com>
Date: Sun, 9 Oct 2022 19:16:23 +0530
Subject: [PATCH 3/5] Create index.html
---
CSS Rain effect over the camera/index.html | 9 +++++++++
1 file changed, 9 insertions(+)
create mode 100644 CSS Rain effect over the camera/index.html
diff --git a/CSS Rain effect over the camera/index.html b/CSS Rain effect over the camera/index.html
new file mode 100644
index 0000000..6c57b15
--- /dev/null
+++ b/CSS Rain effect over the camera/index.html
@@ -0,0 +1,9 @@
+
+
+
+
+
SPLAT
+
BACK
ROW
+
SINGLE
+