1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографика typographyshimmerglass

Glass Text Shimmer

Появление текста с эффектом рассеивания матового стекла и подсветкой.

Glass Text Shimmer

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { GlassTextShimmer } from 'astro-component-kit';
---

<GlassTextReveal>Content</GlassTextReveal>
--- import { GlassTextShimmer } from 'astro-component-kit'; --- <GlassTextReveal>Content</GlassTextReveal>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/GlassTextShimmer.astro:

astro 
---
---
<h3 class="shimmer-txt"><slot /></h3>
<style>
  .shimmer-txt { font-size: 2rem; color: rgba(255,255,255,0.2); background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 200% 100%; -webkit-background-clip: text; animation: shimmer-anim 3s infinite linear; margin: 0; font-weight: 800; }
  @keyframes shimmer-anim { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }
</style>
--- --- <h3 class="shimmer-txt"><slot /></h3> <style> .shimmer-txt { font-size: 2rem; color: rgba(255,255,255,0.2); background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 200% 100%; -webkit-background-clip: text; animation: shimmer-anim 3s infinite linear; margin: 0; font-weight: 800; } @keyframes shimmer-anim { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } </style>

Краткая информация

Категория
Типографика
Имя файла
GlassTextShimmer.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typographyshimmerglass