border animation

totaro · Jan 22, 2024 · 118ddbc · 118ddbc
1 parent e868552
commit 118ddbc
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -64,7 +64,8 @@
 				<li><a href="#slidingcards" id="menu-link">Sliding Cards</a></li>
 				<li><a href="#changebgcolor" id="menu-link">Change Color</a></li>
 				<li><a href="#animatedbackground" id="menu-link">Animated Background</a></li>
-				</ul>
+				<li><a href="#borderanimation" id="menu-link">Border Animation</a></li>
+			</ul>
 		</div>
 
 		<div class="hero__content">
@@ -310,6 +311,28 @@ <h5><ul class="inner-links">
 
 		</div>
 
+		<a id="borderanimation"></a>
+		<div class="entry">
+			<div class="entry__meta">
+				<h6>Motion<span></span>#9</h6>
+				<h4>Border Animation</h4>
+				<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">
+				<div class="animated_boxes">
+					<div class="animated_box">
+						<span class="animated_box_text">Mouse Me!</span>
+					</div>
+					<div class="animated_box2">
+						<span class="animated_box_text">Mouse Me!</span>
+					</div>
+				</div>
+			</figure>
+		</div>
+
 	</section>
 
 	<footer>

diff --git a/style.css b/style.css
@@ -409,8 +409,8 @@
 		#menu-container a {
 			display: inline-block;
 			font-size: 2.25rem;
-			line-height: 1.4;
-			margin-bottom: 2rem;
+			line-height: 1.3;
+			margin-bottom: 1.2rem;
 			transition: color .5s ease-in-out;
 			color: var(--color-bg);
 		}
@@ -1052,5 +1052,106 @@
 		}
 
 
+		/* Border Animation -------------------------------------------- */
+
+
+		.animated_boxes{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap:2rem;
+		}
+
+		.animated_box,
+		.animated_box2{
+			display: grid;
+			place-items: center;
+			position: relative;
+			padding: 1rem;
+			background: #091130;
+			border-radius: 10px;
+			cursor:pointer;
+			word-wrap: break-word;
+			min-width: 0;
+		}
+		span.animated_box_text
+		{
+			font-size: 1.2rem;
+			margin: 0;
+			font-family: 'Poppins', sans-serif;
+			color: var(--white);
+			font-weight: 700;
+			text-align: center;
+			z-index: 10;
+			overflow-wrap: break-word;
+			min-width: 0;
+		}
+
+		/* Border Animation 1 */
+
+		.animated_box{
+			overflow: hidden;
+		}
+
+		.animated_box:hover::before{
+			position: absolute;
+			content: '';
+			height: 10rem;
+			width:15rem;
+			background: tomato;
+			border-radius: 10px;
+			transition: 0.3s;
+			animation: 2s linear infinite animateborder;
+		}
+
+		.animated_box::after{
+			position: absolute;
+			content: '';
+			inset:3px;
+			border-radius: 10px;
+			background: #243063;
+		}
+
+		@keyframes animateborder {
+			50%{
+				filter: hue-rotate(350deg);
+			}
+
+		}
+
+		/* Border Animation 2 */
+
+		.animated_box2{
+			overflow: hidden;
+		}
+
+		.animated_box2::before{
+			position: absolute;
+			content: '';
+			height: 60%;
+			width:140%;
+			background: white;
+			transform: rotate(22deg);
+		}
+
+		.animated_box2:hover::before{
+			animation: 2s linear infinite animateborder2;
+		}
+
+		.animated_box2::after{
+			position: absolute;
+			content: '';
+			inset:3px;
+			border-radius: 10px;
+			background: #243063;
+		}
 
-
+		@keyframes animateborder2 {
+			from{
+				transform: rotate(0deg);
+			}
+			to{
+				transform: rotate(360deg);
+			}
+
+		}