Card

作者:dexter-st0 点赞MIT

实时预览

源代码

export default function Component() {
  return (
    <div className="card">
  <div className="notes">♪♪♪♪♪</div>
  <div className="notes">♪♪♪♪</div>
  <div className="notes">♪♪♪♪♪</div>

  <div className="header">
    TICKET
    <div className="symbol"></div>
  </div>
  <div className="body">
    <em>Day pass</em><br />
    May 14<sup>th</sup> 2026<br />
    Venue address, State, #####
  </div>
  <div className="footer">
    <div className="number">Seat <span className="bold">E7</span></div>
    <div className="barcode"></div>
  </div>

  <div className="bg holographic"></div>
  <svg className="filter">
    <filter id="bump">
      <feTurbulence
        result="noise"
        numOctaves="3"
        baseFrequency="0.7"
        type="fractalNoise"
      ></feTurbulence>
      <feSpecularLighting
        in="noise"
        result="specular"
        lighting-color="#fffffc"
        specularExponent="25"
        specularConstant="0.8"
        surfaceScale="0.15"
      >
        <fePointLight z="210" y="100" x="100"></fePointLight>
      </feSpecularLighting>
      <feComposite
        result="noise2"
        operator="in"
        in="specular"
        in2="SourceGraphic"
      ></feComposite>
      <feBlend mode="screen" in2="noise2" in="SourceGraphic"></feBlend>
    </filter>
  </svg>
</div>
  );
}