炫彩门票卡片

01.card {02  --width: 180px;03  --height: 320px;04  --perforation-size: 12px;05  --cutouts-adjust: 70px;06 07  position: relative;08  display: grid;09  grid-template-rows: auto 1fr auto;10  gap: 1rem;11  grid-template-areas:12    "header"13    "body"14    "footer";15 16  width: var(--width);17  height: var(--height);18  padding: var(--perforation-size) 0;19 20  font-family: "Inter", sans-serif;21  font-size: 1rem;22  user-select: none;23  overflow: hidden;24 25  filter: drop-shadow(0 2px 1px #00000025) drop-shadow(0 4px 3px #00000025)26    drop-shadow(0 10px 9px #00000025) drop-shadow(0 20px 20px #00000025)27    drop-shadow(0 40px 40px #00000025);28  animation: hover 3s ease infinite;29  will-change: transform, filter;30}31 32@keyframes hover {33  50% {34    filter: drop-shadow(0 4px 3px #00000015) drop-shadow(0 6px 6px #00000015)35      drop-shadow(0 16px 14px #00000015) drop-shadow(0 30px 28px #00000015)36      drop-shadow(0 60px 60px #00000015);37    transform: translateY(-7px) scale(1.02);38  }39}40 41.filter {42  position: absolute;43}44 45.bg {46  position: absolute;47  inset: 0;48  border-radius: inherit;49  background-color: #fff;50  filter: url(#bump);51  mask:52    /* top perforations */53    radial-gradient(54      circle at 50% 0,55      #fff0 calc(var(--perforation-size) - 5px),56      #000 calc(var(--perforation-size) - 4px)57    ),58    /* bottom perforations */59      radial-gradient(60        circle at 50% 100%,61        #fff0 calc(var(--perforation-size) - 5px),62        #000 calc(var(--perforation-size) - 4px)63      ),64    /* left notch */65      radial-gradient(circle 8px at left center, #000 98%, #0000 100%),66    /* right notch */67      radial-gradient(circle 8px at right center, #000 98%, #0000 100%),68    /* cut perforation */69      repeating-linear-gradient(70        90deg,71        #000 10px,72        #000 15px,73        #0000 16px,74        #0000 24px75      );76 77  mask-repeat: repeat-x, repeat-x, no-repeat, no-repeat, repeat-x;78 79  mask-size:80    calc(var(--perforation-size) * 2) 100%,81    calc(var(--perforation-size) * 2) 100%,82    16px 16px,83    16px 16px,84    10px 2px;85 86  mask-position:87    calc(0.5 * var(--perforation-size)) top,88    calc(0.5 * var(--perforation-size)) bottom,89    left var(--cutouts-adjust),90    right var(--cutouts-adjust),91    0 calc(var(--cutouts-adjust) + 7px);92 93  mask-composite: intersect, exclude, add, add;94}95 96.holographic {97  background-image: linear-gradient(to bottom, #fe58, 90%, #0002),98    conic-gradient(99      at 60% 50%,100      #ccc,101      #ff6bfe,102      #00f9f8,103      #ddd,104      #0081fd,105      #eef0bc,106      #0081fd,107      #ff6bfe,108      #0002,109      #0081fd,110      #ddd,111      #01fefb,112      #ccc113    );114}115.holographic::before {116  content: "";117  position: absolute;118  inset: 0;119  border-radius: inherit;120  background: radial-gradient(circle at 70% 20%, #f0f, #0000),121    repeating-radial-gradient(circle at 30% 80%, #fff, #f4a 48px, #eeeeee 150px);122  mix-blend-mode: color-burn;123}124.holographic::after {125  content: "";126  position: absolute;127  inset: 0;128  border-radius: inherit;129  background: linear-gradient(to bottom, #f205, #f00, #0f0, #f205);130  mix-blend-mode: difference;131 132  animation: bg-pos 3s ease-in-out infinite alternate;133  background-position: 0 0;134  background-size: 100% 300%;135  background-repeat: repeat;136}137 138@keyframes bg-pos {139  to {140    background-position: 0 500px;141  }142}143 144.header {145  position: relative;146  grid-area: header;147  margin: 0 8px;148  text-align: center;149  z-index: 1;150  font-family: "Impact", sans-serif;151  font-size: 2.75rem;152  letter-spacing: 2px;153  color: #ffffff9f;154  text-shadow: 0 0 0 #000;155  -webkit-text-stroke: #fff 0.5px;156  mix-blend-mode: difference;157}158 159.body {160  grid-area: body;161  margin: 0 1em;162  padding: 0.5em;163  font-weight: 200;164  z-index: 1;165}166 167.footer {168  grid-area: footer;169  z-index: 1;170 171  margin: 0 1em 1em 1em;172}173 174.number {175  margin-bottom: 0.75rem;176  text-align: center;177  border-radius: 999px 0;178  color: #000;179  font-weight: 200;180  .bold {181    font-weight: 600;182  }183}184 185.barcode {186  justify-self: center;187  width: 0;188  height: 32px;189  box-shadow:190    0px 0 0 1px #000,191    5px 0 0 1px #000,192    7px 0 0 1px #000,193    11px 0 0 1px #000,194    15px 0 0 1px #000,195    16px 0 0 1px #000,196    22px 0 0 1px #000,197    27px 0 0 1px #000,198    30px 0 0 1px #000,199    35px 0 0 1px #000,200    36px 0 0 1px #000,201    39px 0 0 1px #000,202    43px 0 0 1px #000,203    47px 0 0 1px #000,204    50px 0 0 1px #000,205    55px 0 0 1px #000,206    59px 0 0 1px #000,207    60px 0 0 1px #000,208    64px 0 0 1px #000,209    69px 0 0 1px #000,210    70px 0 0 1px #000,211    74px 0 0 1px #000;212  transform: translateX(37px);213}214 215.symbol {216  position: absolute;217  top: 1.3em;218  right: 0px;219  rotate: 185deg;220  font-size: 1.1em;221  color: #fff;222  line-height: 0.5;223  opacity: 0.2;224}225.notes {226  position: absolute;227  inset: 0;228  overflow: hidden;229  font-size: 5rem;230  color: #e7e7e7;231  mix-blend-mode: color-burn;232  transform: translateY(20%);233  z-index: 1;234}235.notes:nth-child(2) {236  transform: translateY(40%);237}238.notes:nth-child(3) {239  transform: translateY(60%);240}