Bidexdablitz animation (#2363)

* Create index.html * Create index.css * Added animation gif * Update include.js
zero-to-mastery · Oct 27, 2023 · 5be0b11 · 5be0b11
1 parent bc8401c
commit 5be0b11
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 0 deletions.
diff --git a/Art/Bidexdablitz/index.css b/Art/Bidexdablitz/index.css
@@ -0,0 +1,107 @@
+/** @format */
+
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+}
+:root {
+	--limit: 30deg;
+}
+
+.tilt-card-3d {
+	padding: 2rem;
+	font-size: 3rem;
+	text-transform: uppercase;
+	font-weight: bold;
+	font-family: cursive;
+	width: fit-content;
+	margin: 4rem;
+	margin-inline: auto;
+	position: relative;
+	border-radius: 10px;
+	color: white;
+	background-color: black;
+
+	/* 3D effect */
+	transform-style: preserve-3d;
+	transform: perspective(5000px);
+
+	/* animation */
+	animation: tilt-card-3d 12s ease-in-out infinite alternate,
+		shine 12s ease-in-out infinite alternate;
+}
+
+.tilt-card-3d::before,
+.tilt-card-3d::after {
+	content: '';
+	position: absolute;
+	border-radius: inherit;
+}
+
+.tilt-card-3d::before {
+	inset: -0.4em;
+	background: linear-gradient(-45deg, red, blue);
+	transform: translateZ(-50px);
+}
+
+/* shadow */
+.tilt-card-3d::after {
+	inset: 0;
+	background: black;
+	transform: translateZ(-50px);
+	filter: blur(10px);
+	opacity: 0.6;
+}
+
+@keyframes tilt-card-3d {
+	from {
+		transform: perspective(5000px) rotateY(0deg) rotateX(0deg)
+			translate(0em, 0em);
+	}
+	25% {
+		transform: perspective(5000px) rotateY(-30deg) rotateX(-30deg)
+			translate(0.5em, -0.2em);
+	}
+	50% {
+		transform: perspective(5000px) rotateY(30deg) rotateX(30deg)
+			translate(-0.5em, 0.2em);
+	}
+	62.5% {
+		transform: perspective(5000px) rotateY(0deg) rotateX(0deg)
+			translate(0em, 0em);
+	}
+	75% {
+		transform: perspective(5000px) rotateY(-30deg) rotateX(30deg)
+			translate(0.5em, 0.2em);
+	}
+	to {
+		transform: perspective(5000px) rotateY(30deg) rotateX(-30deg)
+			translate(-0.5em, -0.2em);
+	}
+}
+@keyframes shine {
+	from {
+		text-shadow: 0 0 0em blue;
+	}
+	17% {
+		text-shadow: 0 0 0.4em blue;
+	}
+	34% {
+		text-shadow: 0 0 0em currentColor;
+	}
+	51% {
+		text-shadow: 0 0 0.2em currentColor;
+	}
+	68% {
+		text-shadow: 0 0 0em red;
+	}
+	85% {
+		text-shadow: 0 0 0.4em red;
+	}
+	to {
+		text-shadow: 0 0 0 currentColor;
+	}
+}
diff --git a/Art/Bidexdablitz/index.html b/Art/Bidexdablitz/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Bidexdablitz Animation</title>
+	<link href="./index.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+	<div class="tilt-card-3d">
+		hacktoberfest
+	</div>
+</body>
+</html>
diff --git a/Art/Bidexdablitz/tilt-card-3d.gif b/Art/Bidexdablitz/tilt-card-3d.gif
diff --git a/include.js b/include.js
@@ -1,5 +1,12 @@
 /* Each contributions details to builds cards */
 const cards = [
+  {
+    artName: 'tilt-card-3d',
+    pageLink: './Art/Bidexdablitz/index.html',
+    imageLink: './Art/Bidexdablitz/tilt-card-3d.gif',
+    author: 'Bamidele Damilola Joseph',
+    githubLink: 'https://github.com/Bidexdablitz'
+  },
   {
     artName: 'Flower Animation',
     pageLink: './Art/Kris248/index.html',