From 7a607894131e9daf1fdc06cf2c127f604d97af49 Mon Sep 17 00:00:00 2001 From: Raghvendra Mittal <85191142+codermittal17@users.noreply.github.com> Date: Mon, 17 Oct 2022 19:02:57 +0530 Subject: [PATCH] created animated background effect (#97) --- Animated Background/index.html | 56 ++++++++++++++++++++++++++++++++++ Animated Background/style.css | 42 +++++++++++++++++++++++++ 2 files changed, 98 insertions(+) create mode 100644 Animated Background/index.html create mode 100644 Animated Background/style.css diff --git a/Animated Background/index.html b/Animated Background/index.html new file mode 100644 index 0000000..80ca8a8 --- /dev/null +++ b/Animated Background/index.html @@ -0,0 +1,56 @@ + + + + + + + Animated Background + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/Animated Background/style.css b/Animated Background/style.css new file mode 100644 index 0000000..ac39afb --- /dev/null +++ b/Animated Background/style.css @@ -0,0 +1,42 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + min-height: 100vh; + background: #0c192c; +} +.container{ + position: relative; + width: 100%; + height: 100vh; + overflow: hidden; +} +.bubbles{ + position: relative; + display: flex; +} +.bubbles span{ + position: relative; + width: 30px; + height: 30px; + background:#4fc3dc; + margin: 0 4px; + border-radius: 50%; + box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px #4fc3dc, 0 0 100px #4fc3dc; + animation: animate 15s linear infinite; + animation-duration: calc(125s / var(--i)); +} +.bubbles span:nth-child(even){ + background:#ff2d75; + box-shadow: 0 0 0 10px #ff2d7544, 0 0 50px #ff2d75, 0 0 100px #ff2d75; +} +@keyframes animate { + 0%{ + transform: translateY(100vh) scale(0); + } + 100%{ + transform: translateY(-10vh) scale(1); + } +} \ No newline at end of file