animated background

totaro · Jan 15, 2024 · 9a30ad9 · 9a30ad9
1 parent bedc686
commit 9a30ad9
Show file tree

Hide file tree

Showing 2 changed files with 229 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -63,7 +63,8 @@
 				<li><a href="#mousefollow" id="menu-link">Mouse Follow</a></li>
 				<li><a href="#slidingcards" id="menu-link">Sliding Cards</a></li>
 				<li><a href="#changebgcolor" id="menu-link">Change Color</a></li>
-			</ul>
+				<li><a href="#animatedbackground" id="menu-link">Animated Background</a></li>
+				</ul>
 		</div>
 
 		<div class="hero__content">
@@ -277,6 +278,38 @@ <h5><ul class="inner-links">
 
 		</div>
 
+		<a id="animatedbackground"></a>
+		<div class="entry">
+			<div class="entry__meta">
+				<h6>Motion<span></span>#8</h6>
+				<h4>Animated Background</h4><br>
+				<h5><ul class="inner-links">
+					<li><a href="#top">Top <i class="fa-solid fa-arrow-turn-up"></i></a></li>
+				</ul>
+				</h5>
+			</div>
+			<figure class="entry__media animatedBackground">
+				<div class="animated-center">Animated Background</div>
+            <ul class="squares">
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+                <li></li>
+
+            </ul>
+        </div>
+
+			</figure>
+
+		</div>
+
 	</section>
 
 	<footer>

diff --git a/style.css b/style.css
@@ -262,9 +262,9 @@
 			border: 1px solid #111a3a;
 
 		}
-		.entry figure.red {
-			/*ackground-color: #12a075;*/
-		}
+		/* .entry figure.red {
+			background-color: #12a075;
+		} */
 
 
 		/* lenis css */
@@ -871,4 +871,196 @@
   			transform: scale(1.1);
 		}
 
+/* Amnimated background -----------------------------------*/
+
+.animated-center { 
+
+	font-size: 1.6875rem;
+	letter-spacing: -0.08438rem;
+	margin: 0;
+    font-family: 'Poppins', sans-serif;
+	color: var(--white);
+	font-weight: 700;
+    text-align: center;
+  }
+
+  .entry figure.red {
+	background-color: #12a075;
+}
+
+
+.animatedBackground{
+    /* background-color: blue; */
+	/* background-color: white; */
+    width: 100%;
+    height: 100%;
+    /* border-radius: 30px; */
+
+	border: 1px solid #111a3a;
+	border-radius: 10px;
+	/* border: 1px solid white; */
+
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: 15s ease-in-out infinite backgroundChange;
+}
+.animatedBackground::before{
+    content: "";
+    position:absolute;
+    top:0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    /* border-radius: 30px; */
+	/* padding:0px;
+	margin:0px; */
+	/* border: 1px solid white; */
+
+	border: 1px solid #111a3a;
+	border-radius: 10px;
+    background: linear-gradient(to left,#ffffff63,#ffffff33);
+
+}
+
+
+.squares{
+    position: absolute;
+
+    top:-19px;
+    left:0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+	/* border: 1px solid white; */
+}
+
+.squares li{
+    list-style: none;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: #ffffff4d;
+    animation: 25s linear infinite goingUp;
+    bottom: -150px;
+
+}
+
+.squares li:nth-child(1){
+    left:2%;
+    width: 90px;
+    height: 90px;
+    animation-delay: 9s;
+    animation-duration: 18s;
+}
+.squares li:nth-child(2){
+    left:10%;
+    width: 40px;
+    height: 40px;
+    animation-delay: 2s;
+    animation-duration: 12s;
+}
+.squares li:nth-child(3){
+    left:20%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 2s;
+    animation-duration: 20s;
+}
+.squares li:nth-child(4){
+    left:25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+
+}
+.squares li:nth-child(5){
+    left:35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+    animation-duration: 17s;
+}
+.squares li:nth-child(6){
+    left:40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 6s;
+    animation-duration: 17s;
+}
+.squares li:nth-child(7){
+    left:50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 12s;
+}
+.squares li:nth-child(8){
+    left:65%;
+    width: 55px;
+    height: 55px;
+    animation-delay: 0s;
+
+}
+.squares li:nth-child(9){
+    left:70%;
+    width: 35px;
+    height: 35px;
+    animation-delay: 4s;
+
+}
+.squares li:nth-child(10){
+    left:75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+
+}
+.squares li:nth-child(11){
+    left:85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 9s;
+    animation-duration: 11s;
+}
+
+@keyframes goingUp {
+    0%{
+        transform: translateY(0), rotate(0) scale(0);
+        opacity: 1;
+        border-radius: 0;
+    }
+    100%{
+        transform: translateY(-500px) rotate(720deg) scale(1.5);
+        opacity: 0;
+        border-radius: 80%;
+    }
+}
+
+@keyframes backgroundChange {
+    0%{
+        background-color: blue;
+    }
+    20%{
+        background-color: red;
+    }
+    40%{
+        background-color: green;
+    }
+    60%{
+        background-color: purple;
+    }
+    80%{
+        background-color: orange;
+    }
+    100%{
+        background-color: blue;
+    }
+
+}
+
+
+