پیشنمایش زنده
کد HTML
<div class="card-container">
<div class="plugin-card futuristic">
<div class="card-header">
<svg
class="logo-svg"
viewBox="0 0 302 200"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z"
fill="#00DC82"
></path>
</svg>
<div class="title">@nuxt/ui</div>
<p class="description">
The Intuitive UI Library powered by Reka UI and Tailwind CSS.
</p>
</div>
<div class="card-footer">
<div class="stats">
<span class="stat-item">
<svg
class="stat-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M8 12.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M8 6v4m2-2-2 2-2-2"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
429K
</span>
<span class="stat-item">
<svg
class="stat-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
>
<path
d="m8 1.75 1.88 3.81 4.21.61-3.05 2.97.72 4.2L8 11.25l-3.76 1.98.72-4.2-3.05-2.97 4.21-.61L8 1.75Z"
stroke="currentColor"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
5.2K
</span>
</div>
<div class="actions">
<button class="action-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M8 4v8m-4-4h8"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
></path>
</svg>
</button>
<button class="action-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M6 12L10 8L6 4M9 12h4"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</button>
</div>
</div>
</div>
</div>
کد CSS
.card-container {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
}
.plugin-card.futuristic {
--glow-gradient: linear-gradient(90deg, #00dc82, #0ff, #ff00ff);
--bg-dark: rgba(14, 17, 27, 0.8);
--text-main: #e6edf3;
--text-sub: #9ca3af;
position: relative;
padding: 1.5rem;
border-radius: 1.25rem;
background: var(--bg-dark);
backdrop-filter: blur(1rem) saturate(1.4);
color: var(--text-main);
overflow: hidden;
max-width: 26rem;
width: 100%;
display: flex;
flex-direction: column;
gap: 1.5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}
.plugin-card.futuristic::before {
content: "";
position: absolute;
inset: 0;
padding: 0.125rem;
border-radius: inherit;
background: var(--glow-gradient);
background-size: 300% 300%;
animation: borderFlow 6s linear infinite;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: 0;
}
@keyframes borderFlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.plugin-card.futuristic:hover {
transform: translateY(-0.3rem) scale(1.02);
box-shadow: 0 0 2rem rgba(0, 220, 130, 0.4);
}
.card-header {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.logo-svg {
width: 2.5rem;
height: auto;
}
.title {
font-size: 1.25rem;
font-weight: 700;
background: linear-gradient(90deg, #00dc82, #0ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.description {
font-size: 1rem;
line-height: 1.5;
color: var(--text-sub);
}
.card-footer {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.stats {
display: flex;
gap: 1rem;
font-size: 0.875rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 0.4em;
color: var(--text-sub);
}
.stat-icon {
width: 1rem;
height: 1rem;
}
.actions {
display: flex;
gap: 0.5rem;
}
.action-btn {
width: 2rem;
height: 2rem;
background: rgba(33, 38, 45, 0.7);
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
border: none;
cursor: pointer;
color: var(--text-sub);
transition:
background 0.3s ease,
transform 0.15s ease;
}
.action-btn:hover {
background: rgba(0, 220, 130, 0.2);
transform: scale(1.05);
color: var(--text-main);
}
.action-btn svg {
width: 1.5rem;
height: 1.5rem;
}
.futuristic .title {
position: relative;
overflow: hidden;
white-space: nowrap;
line-height: 1.4rem;
}
.futuristic:hover .title {
border-right: 0.1em solid rgba(0, 220, 130, 0.75);
animation:
typewriter 2s steps(8) forwards,
caretBlink 0.75s steps(1) infinite;
}
@keyframes typewriter {
0% {
width: 0ch;
}
100% {
width: 8ch;
}
}
@keyframes caretBlink {
0%,
100% {
border-color: rgba(0, 220, 130, 0.75);
}
50% {
border-color: transparent;
}
}
.futuristic:hover .title {
animation:
typewriter 2s steps(8) forwards,
caretBlink 0.75s steps(1) infinite;
animation-fill-mode: forwards;
}
.futuristic:hover .title {
animation:
typewriter 2s steps(8) forwards,
caretBlink 0.75s steps(1) infinite;
animation-fill-mode: forwards;
}
.futuristic:hover .title.finished {
border-right: none;
}
.futuristic:hover .title {
border-right: 0.15em solid rgba(0, 220, 130, 0.75);
animation:
typewriter 2s steps(8) forwards,
caretBlink 0.75s steps(1) 0s infinite;
}
.futuristic:hover .title {
animation:
typewriter 2s steps(8) forwards,
caretBlink 0.75s steps(1) 0s infinite,
caretHide 0s linear 2s forwards;
}
@keyframes caretHide {
to {
border-right: none;
}
}