Code CSS pour cartes animées

9,649 DeveloperUI

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 September 2025

Extrait de code d'animation CSS Dopamine Drip

27 May 2025

Un code par mironovbogdan341

31 May 2025

Un code par alejandrokundrah

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Code Menu</title>
  <link rel="stylesheet" href="/css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
  integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <label for="theme">
      <input class="sr-only" type="checkbox" id="theme" />
      <i class="fa-solid fa-lightbulb"></i>
    </label>
    <main>
      <article>
        <div class="header">
          <h2><span>Web</span><span>Leb</span></h2>
          <p>
            From beginner-level to advanced, copy the code you need.
          </p>
          <a href="https://www.web-leb.com/" target="_blank">web-leb.com</a>
        </div>
        <div class="window">
          <div class="scene">
            <ul class="grid">
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-display"></i>
                  </div>
                  <div class="item_text">Landing Pages</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-font"></i>
                  </div>
                  <div class="item_text">Text Animations</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-list"></i>
                  </div>
                  <div class="item_text">Login Forms</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-gamepad"></i>
                  </div>
                  <div class="item_text">JavaScript Games</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-toggle-on"></i>
                  </div>
                  <div class="item_text">Buttons</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-bars"></i>
                  </div>
                  <div class="item_text">Navigation Bars</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-plus"></i>
                  </div>
                  <div class="item_text">Other Codes</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-user-check"></i>
                  </div>
                  <div class="item_text">Register Forms</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-angles-right"></i>
                  </div>
                  <div class="item_text">Card Sliders</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-bolt"></i>
                  </div>
                  <div class="item_text">Bootstrap Elements</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-spinner"></i>
                  </div>
                  <div class="item_text">CSS Loading Animation</div>
                </div>
              </li>
              <li>
                <div class="item">
                  <div class="item_icon">
                    <i class="fa-solid fa-share-nodes"></i>
                  </div>
                  <div class="item_text">Social Menus</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </article>
    </main>
</body>
</html>

CSS

@font-face {
  font-family: "Geist Sans";
  src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");
}

*,
*:after,
*:before {
	box-sizing: border-box;
}

:root {
	--speed: 8s;
	--transition: 0.15s;
}

body {
	display: grid;
	place-items: center;
	min-height: 100vh;
	color: hsl(0 0% 10%);
	font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
	background-image:
		radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 0%), 
    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.15) 0px, transparent 50%),
    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.15) 0px, transparent 50%),
    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.15) 0px, transparent 50%),
    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.15) 0px, transparent 50%),
    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.15) 0px, transparent 50%),
    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.15) 0px, transparent 50%);
	background-color: hsl(0 0% 100%);
	font-weight: 80;
	transition: background-color 0.25s, color 0.25s;
  overflow: hidden;
  font-size: 16px;;
}

main {
  padding: 2rem 0;
  width: 100%;
}

:root:has(#theme:checked) :is(body, .controls, .item) {
	background-color: hsl(0 0% 10%);
	color: hsl(0 0% 100%);
	border-color: hsl(0 0% 25%);
}
:root:has(#theme:checked) article {
	background-color: hsl(0 0% 10%);
	color: hsl(0 0% 100%);
	border-color: hsl(0 0% 25%);
	box-shadow: 0 10px 20px -5px hsl(0 0% 0% / 0.5);
}
:root:has(#theme:checked) .item {
	background-color: black;
}
:root:has(#theme:checked) li::before {
	background-color: black;
}

article {
	padding: 2rem;
  margin: 0 auto;
	width: 100%;
	box-shadow: 0 10px 20px -5px hsl(0 0% 50% / 0.5);
	border: 1px solid hsl(0 0% 90%);
	border-radius: 6px;
	background: hsl(0 0% 100%);
	resize: horizontal;
	overflow: hidden;
	max-width: min(calc(600px + 8rem), calc(100vw - 2rem));
	min-width: 340px;
	container-type: inline-size;
	transition: background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;
}
h2 {
	display: flex;
	gap: 0.25ch;
	font-size: clamp(1.5rem, 4cqi + 1rem, 3rem);
	font-weight: 160;
	margin: 0;
	grid-column: 1 / -1;
}

h2 span:last-of-type {
	display: inline-block;
	background: linear-gradient(to right, #9333ea, #db2777, #9333ea) 0 0 / 400% 100% no-repeat;
	background-clip: text;
	color: transparent;
	animation: shade 4s infinite linear;
}

@keyframes shade {
	to {
		background-position: 100% 0;
	}
}

.header {
	display: grid;
	grid-template: auto 1fr / 6fr 4fr;
	gap: 1rem;
	margin-bottom: 2rem;
	transition: opacity 0.5s;
}

article a {
	align-self: start;
	text-decoration: none;
	justify-self: end;
	border-radius: 100px;
	padding: 0.5rem 1.5rem;
	border: 0;
	color: hsl(0 0% 100%);
	font-weight: 120;
	cursor: pointer;
	background: linear-gradient(to right, #9333ea, #db2777) 0 0 / 200% 100% no-repeat;
	transition: background-position 0.15s;
}

article a:is(:hover, :focus-visible) {
	background-position: 100% 0;
}

p {
	margin: 0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

[for=theme] {
	width: 48px;
	aspect-ratio: 1;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
}

[for=theme] svg {
	width: 75%;
}

#theme + svg path:first-of-type,
#theme:checked + svg path:last-of-type {
	opacity: 0;
}
#theme:checked + svg path:first-of-type {
	opacity: 1;
}

label, input {
	accent-color: #db2777;
	cursor: pointer;
}

/*	border: 2px solid red;*/
.window {
	height: 250px;
	container-type: inline-size;
	transform-style: preserve-3d;
	width: 100%;
	outline: 4px dashed transparent;
	transition: outline 0.5s;
}

.scene {
	--buff: 3rem;
	height: 100%;
	width: 100%;
	mask:
		linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),
		linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
	mask-composite: intersect;
}

.grid {
	--count: 6; 
	--inset: 0;
	--outset: 2.5;
	height: 100%;
	width: 100%;
	margin: 0;
	list-style-type: none;
	position: relative;
	display: grid;
	padding: 0 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2rem;
	transition: transform 0.5s;
	/*	3D translation */
	transform:
		rotateX(calc(var(--rotate, 0) * 20deg))
		rotateZ(calc(var(--rotate, 0) * -20deg))
		skewX(calc(var(--rotate, 0) * 20deg));
}

:root:has(#dimension:checked) .grid {
	--rotate: 1;
}

li {
	min-height: 60px;
	transform-style: preserve-3d;
	width: 100%;
	z-index: calc(1 + var(--active));
}
li::before {
	content: "";
	position: absolute;
	inset: 4px 4px -2px -2px;
	border-radius: 6px;
	background: hsl(0 0% 0% / 0.1);
	filter: blur(calc(var(--active, 0) * 8px));
	z-index: -1;
	transition: scale var(--transition), opacity var(--transition), translate var(--transition), filter var(--transition);
	transform-origin: 50% 0;
	scale: 1 calc(1 + (var(--active, 0) * 0.05));
	--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
}

.grid:hover li {
	animation-play-state: paused;
}

.grid {
	transform-style: preserve-3d;
	gap: 1rem;
}

.item {
	align-items: center;
	background: hsl(0 0% 100%);
	border: 1px solid hsl(0 0% 90%);
	color: hsl(0 0% 10%);
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	gap: 1rem;
	height: 100%;
	justify-content: start;
	overflow: hidden;
	padding: 1.25rem;
	text-align: center;
	width: 100%;
	transition: transform var(--transition), scale var(--transition), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;;
	scale: calc(1 + (var(--active, 0) * 0.05));
	transform: translate3d(0, 0, calc(var(--active, 0) * 24px));
}
.item_icon {
	width: 24px;
	color: rgb(124, 58, 237);
}
.item_text {
	flex: 1;
	text-align: center;
}

li:nth-of-type(1) { --index: 0; }
li:nth-of-type(2) { --index: 0; }
li:nth-of-type(3) { --index: 1; }
li:nth-of-type(4) { --index: 1; }
li:nth-of-type(5) { --index: 2; }
li:nth-of-type(6) { --index: 2; }
li:nth-of-type(7) { --index: 3; }
li:nth-of-type(8) { --index: 3; }
li:nth-of-type(9) { --index: 4; }
li:nth-of-type(10) { --index: 4; }
li:nth-of-type(11) { --index: 5; }
li:nth-of-type(12) { --index: 5; }

@container (width < 400px) {
	.header {
		grid-template: auto 1fr / 1fr;
	}
	.header a {
		justify-self: start;
	}
	.grid {
		--count: 12;
		--inset: 0;
		--outset: 3;
		grid-template-columns: 1fr;
	}

li:nth-of-type(1) { --index: 0; }
	li:nth-of-type(2) { --index: 1; }
	li:nth-of-type(3) { --index: 2; }
	li:nth-of-type(4) { --index: 3; }
	li:nth-of-type(5) { --index: 4; }
	li:nth-of-type(6) { --index: 5; }
	li:nth-of-type(7) { --index: 6; }
	li:nth-of-type(8) { --index: 7; }
	li:nth-of-type(9) { --index: 8; }
	li:nth-of-type(10) { --index: 9; }
	li:nth-of-type(11) { --index: 10; }
	li:nth-of-type(12) { --index: 11; }

}

@media(prefers-reduced-motion: no-preference) {
	.grid {
		gap: 0 2rem;
	}

li {
		--duration: calc(var(--speed) * 1);
		--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));
		animation: slide var(--duration) var(--delay) infinite linear;
		translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
	}
	li:hover {
		--active: 1;
	}
	@keyframes slide {
		100% {
			translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));
		}
	}

}