Interactive Playing Cards Animation Using Html Css Only

Interactive playing card animation using only HTML and CSS can add a touch of interactivity and engagement to web page. When a user hovers over a playing card within a group of cards, it triggers an animation that brings the selected card outside of the card group. This eye-catching effect not only showcases the power of CSS for creating interactive elements but also provides an engaging user experience. By hovering over the playing cards, users can effortlessly interact with the content, making it an intriguing addition to any website or application.

In this article, we will explore how to implement this captivating "hover effect and animation using HTML and CSS, enhancing the visual appeal and user interaction of your web project.

01. Html
02. CSS
03. Output
04. Youtube Video

Read Also:

HTML:

Let's begin with the foundational structure of an HTML document, as depicted below.

<!DOCTYPE html>
<html>
 <head>
   <title>Interactive Playing Cards Animation Using Html Css Only</title>
 </head>
 <body>
	// Content
 </body>
</html>

Now that we have established the basic HTML structure and ensured that all necessary dependencies are included in the HTML document, it is time to proceed with writing the HTML code, which is provided below.

<!DOCTYPE html>
<html>
<head>
  <title>Intractive Playing Cards Animation | Rustcode</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
<ul class="wrapper">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<script src="script.js"></script>
</body>
</html>

It starts with the <!DOCTYPE html> declaration, which specifies that this is an HTML document.
Inside the <html> tags, you have a <head> section where the title of the page is set to "Interactive Playing Cards Animation | Rustcode." This title typically appears in the browser's title bar or tab.
It links an external CSS file, "style.css," which will be used to define the page's styling.
The <body> section contains the content of the web page. It includes an unordered list <ul> with the class "wrapper," and inside it, there are ten list items <li>. The purpose of this structure is not clear from this code alone, but it suggests that the page may involve interactive playing cards animation.

Read Also:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400;500;600;700;800&display=swap');

* {
    margin: 0px;
	padding: 0px;
	box-sizing: border-box;     
	font-family: 'Eczar', serif;
}

body {
    background-color: #111111;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
}

.wrapper {
    --cards: 10;
	--curvature: 72deg;
	counter-reset: cards;
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: center;
	transform: translateY(420px);
	transform-style: preserve-3d;
	list-style: none;
}

.wrapper > * {
	--curve: calc(var(--curvature) * ((var(--index) - (var(--cards) - 1) / 2) / var(--cards)));
	position: absolute;
	counter-increment: cards;
	flex: 0 0 auto;
	width: 20vw;
	max-width: 25vh;
	aspect-ratio: 2/3;
	transform-origin: 50% 100%;
	transform: rotate(var(--curve)) translateY(-225%);
	transition: all 0.3s;
	cursor: pointer;
	font-size: 11vmin;
	transform-style: preserve-3d;
	border-radius: 4px;
}

.wrapper > *:nth-child(1) {
   --index: 0;
}

.wrapper > *:nth-child(2) {
   --index: 1;
}

.wrapper > *:nth-child(3) {
   --index: 2;
}

.wrapper > *:nth-child(4) {
   --index: 3;
}

.wrapper > *:nth-child(5) {
   --index: 4;
}

.wrapper > *:nth-child(6) {
   --index: 5;
}

.wrapper > *:nth-child(7) {
   --index: 6;
}

.wrapper > *:nth-child(8) {
   --index: 7;
}

.wrapper > *:nth-child(9) {
   --index: 8;
}

.wrapper > *:nth-child(10) {
   --index: 9;
}

.wrapper > *::before {
    content: counter(cards);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	font-weight: bold;
	width: 100%;
	height: 100%;
	background-color: #F8F1E5;
	transition: all 0.3s, translate 0s;
	border-radius: 4px;
	text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	border: 1px solid grey;
}

.wrapper > *:hover {
   animation: hoverEffect 1s ease-in-out infinite alternate forwards;
}

.wrapper > *:hover::before {
    transform: translateY(-42.5%) rotate(calc(var(--curve) * -1)) scale(1.2);
	transition-duration: 0.2s, 0s;
	translate: 0px 0px 1px;
	border: 1px solid grey;
	border-radius: 4px;
}

@keyframes hoverEffect {
	to {
		translate: 0px 12px;
	}
}

The asterisk (*) selector sets default styling for all HTML elements. It resets margins and paddings to zero, uses the border-box sizing model, and sets the font to 'Eczar'.
The body element is styled to have a black background color, and it's set to be a flex container with center alignment and justification. It takes up the full viewport height and has its overflow hidden.
There is a container with the class wrapper. It defines some custom properties (CSS variables) like --cards and --curvature, sets a counter for the child elements, and positions itself absolutely to cover the entire width.
The child elements within the .wrapper container are positioned absolutely and use various custom properties to determine their positioning, rotation, and appearance.
Each child element is styled based on its position using the :nth-child pseudo-selectors, and custom properties like --index are set accordingly.
The child elements have a pseudo-element ::before which displays a card number. It's positioned absolutely, has a background color, and is styled to give a card-like appearance.
When a child element is hovered over, it triggers a CSS animation called hoverEffect, which moves the element slightly.
The hoverEffect animation changes the transform property to create a subtle hover effect where the card moves up and down.

Read Also:

Output:

Read Also:

Youtube Video:

We also made a youtube video for "Interactive Playing Cards Animation Using Html Css Only", if you want to watch demo you can click on below video.

Read Also:

Archive