Introxd 组件库

主题

IxCyberpunkGlitch ​

赛博朋克故障效果组件

文字 ​

Cyberpunk Glitch
Cyberpunk Glitch
Cyberpunk Glitch
vue
<template>
  <IxCyberpunkGlitch text="white 8">
    Cyberpunk Glitch
  </IxCyberpunkGlitch>
</template>

图片 ​

vue
<template>
  <IxCyberpunkGlitch>
    <img src="/images/favicon.png" size-20 rounded-md>
  </IxCyberpunkGlitch>
</template>

元素 ​

vue
<template>
  <IxCyberpunkGlitch>
    <div size-20 bg-lime-6 rounded-md />
  </IxCyberpunkGlitch>
</template>

是否正在播放 ​

Cyberpunk Glitch
Cyberpunk Glitch
Cyberpunk Glitch
vue
<template>
  <IxCyberpunkGlitch v-slot="{ isPlaying }">
    <span text-8 :class="isPlaying ? 'text-dark-1' : 'text-white'">Cyberpunk Glitch</span>
  </IxCyberpunkGlitch>
</template>

感谢 ​

纯 CSS 制作赛博朋克2077“故障风”按钮
教程视频