Moving Card CSS Code free
Preview
Don't forget to give credit:- Mo Waseem
join my telegram channel for updates:- https://t.me/SawggerUi
sometimes link dosent work so copy the link and paste into saved message in telegram and the click on the link.
index.html
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<title>Code Menu</title>6
<link rel="stylesheet" href="/css/styles.css">7
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"8
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="9
crossorigin="anonymous" referrerpolicy="no-referrer" />10
</head>11
<body>12
<label for="theme">13
<input class="sr-only" type="checkbox" id="theme" />14
<i class="fa-solid fa-lightbulb"></i>15
</label>16
<main>17
<article>18
<div class="header">19
<h2><span>Web</span><span>Leb</span></h2>20
<p>21
From beginner-level to advanced, copy the code you need.22
</p>23
<a href="https://www.web-leb.com/" target="_blank">web-leb.com</a>24
</div>25
<div class="window">26
<div class="scene">27
<ul class="grid">28
<li>29
<div class="item">30
<div class="item_icon">31
<i class="fa-solid fa-display"></i>32
</div>33
<div class="item_text">Landing Pages</div>34
</div>35
</li>36
<li>37
<div class="item">38
<div class="item_icon">39
<i class="fa-solid fa-font"></i>40
</div>41
<div class="item_text">Text Animations</div>42
</div>43
</li>44
<li>45
<div class="item">46
<div class="item_icon">47
<i class="fa-solid fa-list"></i>48
</div>49
<div class="item_text">Login Forms</div>50
</div>51
</li>52
<li>53
<div class="item">54
<div class="item_icon">55
<i class="fa-solid fa-gamepad"></i>56
</div>57
<div class="item_text">JavaScript Games</div>58
</div>59
</li>60
<li>61
<div class="item">62
<div class="item_icon">63
<i class="fa-solid fa-toggle-on"></i>64
</div>65
<div class="item_text">Buttons</div>66
</div>67
</li>68
<li>69
<div class="item">70
<div class="item_icon">71
<i class="fa-solid fa-bars"></i>72
</div>73
<div class="item_text">Navigation Bars</div>74
</div>75
</li>76
<li>77
<div class="item">78
<div class="item_icon">79
<i class="fa-solid fa-plus"></i>80
</div>81
<div class="item_text">Other Codes</div>82
</div>83
</li>84
<li>85
<div class="item">86
<div class="item_icon">87
<i class="fa-solid fa-user-check"></i>88
</div>89
<div class="item_text">Register Forms</div>90
</div>91
</li>92
<li>93
<div class="item">94
<div class="item_icon">95
<i class="fa-solid fa-angles-right"></i>96
</div>97
<div class="item_text">Card Sliders</div>98
</div>99
</li>100
<li>101
<div class="item">102
<div class="item_icon">103
<i class="fa-solid fa-bolt"></i>104
</div>105
<div class="item_text">Bootstrap Elements</div>106
</div>107
</li>108
<li>109
<div class="item">110
<div class="item_icon">111
<i class="fa-solid fa-spinner"></i>112
</div>113
<div class="item_text">CSS Loading Animation</div>114
</div>115
</li>116
<li>117
<div class="item">118
<div class="item_icon">119
<i class="fa-solid fa-share-nodes"></i>120
</div>121
<div class="item_text">Social Menus</div>122
</div>123
</li>124
</ul>125
</div>126
</div>127
</article>128
</main>129
</body>130
</html>styles.css
1
@font-face {2
font-family: "Geist Sans";3
src: url("https://assets.codepen.io/605876/GeistVF.ttf") format("truetype");4
}5
6
*,7
*:after,8
*:before {9
box-sizing: border-box;10
}11
12
:root {13
--speed: 8s;14
--transition: 0.15s;15
}16
17
body {18
display: grid;19
place-items: center;20
min-height: 100vh;21
color: hsl(0 0% 10%);22
font-family: "Geist Sans", "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;23
background-image:24
radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.15) 0px, transparent 0%), 25
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.15) 0px, transparent 50%),26
radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 0.15) 0px, transparent 50%),27
radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 0.15) 0px, transparent 50%),28
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.15) 0px, transparent 50%),29
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.15) 0px, transparent 50%),30
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.15) 0px, transparent 50%);31
background-color: hsl(0 0% 100%);32
font-weight: 80;33
transition: background-color 0.25s, color 0.25s;34
overflow: hidden;35
font-size: 16px;;36
}37
38
main {39
padding: 2rem 0;40
width: 100%;41
}42
43
:root:has(#theme:checked) :is(body, .controls, .item) {44
background-color: hsl(0 0% 10%);45
color: hsl(0 0% 100%);46
border-color: hsl(0 0% 25%);47
}48
:root:has(#theme:checked) article {49
background-color: hsl(0 0% 10%);50
color: hsl(0 0% 100%);51
border-color: hsl(0 0% 25%);52
box-shadow: 0 10px 20px -5px hsl(0 0% 0% / 0.5);53
}54
:root:has(#theme:checked) .item {55
background-color: black;56
}57
:root:has(#theme:checked) li::before {58
background-color: black;59
}60
61
article {62
padding: 2rem;63
margin: 0 auto;64
width: 100%;65
box-shadow: 0 10px 20px -5px hsl(0 0% 50% / 0.5);66
border: 1px solid hsl(0 0% 90%);67
border-radius: 6px;68
background: hsl(0 0% 100%);69
resize: horizontal;70
overflow: hidden;71
max-width: min(calc(600px + 8rem), calc(100vw - 2rem));72
min-width: 340px;73
container-type: inline-size;74
transition: background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;75
}76
h2 {77
display: flex;78
gap: 0.25ch;79
font-size: clamp(1.5rem, 4cqi + 1rem, 3rem);80
font-weight: 160;81
margin: 0;82
grid-column: 1 / -1;83
}84
85
h2 span:last-of-type {86
display: inline-block;87
background: linear-gradient(to right, #9333ea, #db2777, #9333ea) 0 0 / 400% 100% no-repeat;88
background-clip: text;89
color: transparent;90
animation: shade 4s infinite linear;91
}92
93
@keyframes shade {94
to {95
background-position: 100% 0;96
}97
}98
99
.header {100
display: grid;101
grid-template: auto 1fr / 6fr 4fr;102
gap: 1rem;103
margin-bottom: 2rem;104
transition: opacity 0.5s;105
}106
107
article a {108
align-self: start;109
text-decoration: none;110
justify-self: end;111
border-radius: 100px;112
padding: 0.5rem 1.5rem;113
border: 0;114
color: hsl(0 0% 100%);115
font-weight: 120;116
cursor: pointer;117
background: linear-gradient(to right, #9333ea, #db2777) 0 0 / 200% 100% no-repeat;118
transition: background-position 0.15s;119
}120
121
article a:is(:hover, :focus-visible) {122
background-position: 100% 0;123
}124
125
p {126
margin: 0;127
}128
129
.sr-only {130
position: absolute;131
width: 1px;132
height: 1px;133
padding: 0;134
margin: -1px;135
overflow: hidden;136
clip: rect(0, 0, 0, 0);137
white-space: nowrap;138
border-width: 0;139
}140
141
[for=theme] {142
width: 48px;143
aspect-ratio: 1;144
position: fixed;145
bottom: 1rem;146
right: 1rem;147
display: grid;148
place-items: center;149
}150
151
[for=theme] svg {152
width: 75%;153
}154
155
#theme + svg path:first-of-type,156
#theme:checked + svg path:last-of-type {157
opacity: 0;158
}159
#theme:checked + svg path:first-of-type {160
opacity: 1;161
}162
163
164
label, input {165
accent-color: #db2777;166
cursor: pointer;167
}168
169
/* border: 2px solid red;*/170
.window {171
height: 250px;172
container-type: inline-size;173
transform-style: preserve-3d;174
width: 100%;175
outline: 4px dashed transparent;176
transition: outline 0.5s;177
}178
179
.scene {180
--buff: 3rem;181
height: 100%;182
width: 100%;183
mask:184
linear-gradient(transparent, white var(--buff) calc(100% - var(--buff)), transparent),185
linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);186
mask-composite: intersect;187
}188
189
190
.grid {191
--count: 6; 192
--inset: 0;193
--outset: 2.5;194
height: 100%;195
width: 100%;196
margin: 0;197
list-style-type: none;198
position: relative;199
display: grid;200
padding: 0 1rem;201
display: grid;202
grid-template-columns: 1fr 1fr;203
gap: 0 2rem;204
transition: transform 0.5s;205
/* 3D translation */206
transform:207
rotateX(calc(var(--rotate, 0) * 20deg))208
rotateZ(calc(var(--rotate, 0) * -20deg))209
skewX(calc(var(--rotate, 0) * 20deg));210
}211
212
:root:has(#dimension:checked) .grid {213
--rotate: 1;214
}215
216
li {217
min-height: 60px;218
transform-style: preserve-3d;219
width: 100%;220
z-index: calc(1 + var(--active));221
}222
li::before {223
content: "";224
position: absolute;225
inset: 4px 4px -2px -2px;226
border-radius: 6px;227
background: hsl(0 0% 0% / 0.1);228
filter: blur(calc(var(--active, 0) * 8px));229
z-index: -1;230
transition: scale var(--transition), opacity var(--transition), translate var(--transition), filter var(--transition);231
transform-origin: 50% 0;232
scale: 1 calc(1 + (var(--active, 0) * 0.05));233
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);234
box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);235
}236
237
.grid:hover li {238
animation-play-state: paused;239
}240
241
.grid {242
transform-style: preserve-3d;243
gap: 1rem;244
}245
246
.item {247
align-items: center;248
background: hsl(0 0% 100%);249
border: 1px solid hsl(0 0% 90%);250
color: hsl(0 0% 10%);251
border-radius: 6px;252
cursor: pointer;253
display: flex;254
gap: 1rem;255
height: 100%;256
justify-content: start;257
overflow: hidden;258
padding: 1.25rem;259
text-align: center;260
width: 100%;261
transition: transform var(--transition), scale var(--transition), background-color 0.25s, color 0.25s, border 0.25s, box-shadow 0.25s;;262
scale: calc(1 + (var(--active, 0) * 0.05));263
transform: translate3d(0, 0, calc(var(--active, 0) * 24px));264
}265
.item_icon {266
width: 24px;267
color: rgb(124, 58, 237);268
}269
.item_text {270
flex: 1;271
text-align: center;272
}273
274
li:nth-of-type(1) { --index: 0; }275
li:nth-of-type(2) { --index: 0; }276
li:nth-of-type(3) { --index: 1; }277
li:nth-of-type(4) { --index: 1; }278
li:nth-of-type(5) { --index: 2; }279
li:nth-of-type(6) { --index: 2; }280
li:nth-of-type(7) { --index: 3; }281
li:nth-of-type(8) { --index: 3; }282
li:nth-of-type(9) { --index: 4; }283
li:nth-of-type(10) { --index: 4; }284
li:nth-of-type(11) { --index: 5; }285
li:nth-of-type(12) { --index: 5; }286
287
@container (width < 400px) {288
.header {289
grid-template: auto 1fr / 1fr;290
}291
.header a {292
justify-self: start;293
}294
.grid {295
--count: 12;296
--inset: 0;297
--outset: 3;298
grid-template-columns: 1fr;299
}300
301
li:nth-of-type(1) { --index: 0; }302
li:nth-of-type(2) { --index: 1; }303
li:nth-of-type(3) { --index: 2; }304
li:nth-of-type(4) { --index: 3; }305
li:nth-of-type(5) { --index: 4; }306
li:nth-of-type(6) { --index: 5; }307
li:nth-of-type(7) { --index: 6; }308
li:nth-of-type(8) { --index: 7; }309
li:nth-of-type(9) { --index: 8; }310
li:nth-of-type(10) { --index: 9; }311
li:nth-of-type(11) { --index: 10; }312
li:nth-of-type(12) { --index: 11; }313
314
315
}316
317
@media(prefers-reduced-motion: no-preference) {318
.grid {319
gap: 0 2rem;320
}321
322
li {323
--duration: calc(var(--speed) * 1);324
--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - 8));325
animation: slide var(--duration) var(--delay) infinite linear;326
translate: 0% calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);327
}328
li:hover {329
--active: 1;330
}331
@keyframes slide {332
100% {333
translate: 0% calc(calc((var(--index) + var(--outset, 0)) * -100%));334
}335
}336
337
}main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
