From 610c72028a6b542971c6a9111ecfe9016324b852 Mon Sep 17 00:00:00 2001
From: Raghvendra Mittal <85191142+codermittal17@users.noreply.github.com>
Date: Mon, 17 Oct 2022 19:03:42 +0530
Subject: [PATCH] Animation3 (#99)
* created animated background effect
* loading animation effect
* soap bubble animation
---
Soap Bubble Animation/index.html | 36 +++++++++++
Soap Bubble Animation/style.css | 105 +++++++++++++++++++++++++++++++
2 files changed, 141 insertions(+)
create mode 100644 Soap Bubble Animation/index.html
create mode 100644 Soap Bubble Animation/style.css
diff --git a/Soap Bubble Animation/index.html b/Soap Bubble Animation/index.html
new file mode 100644
index 0000000..39316ce
--- /dev/null
+++ b/Soap Bubble Animation/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ Soap Bubble Animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Soap Bubble Animation/style.css b/Soap Bubble Animation/style.css
new file mode 100644
index 0000000..1565163
--- /dev/null
+++ b/Soap Bubble Animation/style.css
@@ -0,0 +1,105 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background-color: #000;
+}
+.bubble{
+ position: absolute;
+ height: 200px;
+ width: 200px;
+ border-radius: 50%;
+ box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.25);
+ animation: animate 8s ease-in-out infinite;
+}
+.bubble:nth-child(2){
+ position: relative;
+ zoom: 0.45;
+ left: -10px;
+ top: -100px;
+ animation-delay: -4s;
+}
+.bubble:nth-child(3){
+ position: relative;
+ zoom: 0.25;
+ right: -80px;
+ top: -300px;
+ animation-delay: -6s;
+}
+.bubble:nth-child(4){
+ position: relative;
+ zoom: 0.35;
+ right: -120px;
+ top: -200px;
+ animation-delay: -3s;
+}
+@keyframes animate {
+ 0%,100%{
+ transform: translateY(-20px);
+ }
+ 50%{
+ transform: translateY(20px);
+ }
+}
+.bubble::before{
+ content: '';
+ position: absolute;
+ top: 80px;
+ left: 80px;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background:#ffff;
+ z-index: 10;
+ filter: blur(2px);
+}
+.bubble::after{
+ content: '';
+ position: absolute;
+ top: 50px;
+ left: 45px;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background:#ffff;
+ z-index: 10;
+ filter: blur(2px);
+}
+.bubble span{
+ position: absolute;
+ border-radius: 50%;
+}
+.bubble span:nth-child(1){
+ inset: 10px;
+ border-left: 15px solid #0fb4ff;
+ filter: blur(8px);
+}
+.bubble span:nth-child(2){
+ inset: 10px;
+ border-right: 15px solid #ff4484;
+ filter: blur(8px);
+}
+
+.bubble span:nth-child(3){
+ inset: 20px;
+ border-top: 15px solid #ffeb3b;
+ filter: blur(8px);
+}
+
+.bubble span:nth-child(4){
+ inset: 30px;
+ border-left: 15px solid #ff4484;
+ filter: blur(12px);
+}
+.bubble span:nth-child(5){
+ inset:10px;
+ border-bottom: 10px solid #fff;
+ filter: blur(8px);
+ transform: rotate(330deg);
+}
\ No newline at end of file