Moving Card CSS Code

Open In Editor Publish Your Code

<!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%));
		}
	}

}

Moving Card CSS Code

Recommended

Animated HTML and CSS Input

CSS Ghost Animation

HTML Template with P5.js and CSS

HTML

CSS

JS

Recommended

Animated HTML and CSS Input

CSS Ghost Animation

HTML Template with P5.js and CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS