랜턴 효과를 작성하십시오

Vue, Nuxt에 적합합니다. 사용된 라이브러리: Unocss Sass

코드

package.json

        {
    "sass": "^1.82.0",
    "unocss": "^0.65.3",
}

        const list = [
  {
    class: 'left-10',
    text: '新年',
  },
  {
    class: 'right-10',
    text: '快乐',
  },
]

html

        <div v-for="item in list" :key="item" :class="item.class" class="absolute top-0 w-[100px] [@media(max-width:1024px)]:hidden" flex="~ col items-center">
  <div h-15 w="2px" bg="#FF0000" />
    <div h-1 w-10 bg="#e3c670" rd="lt-2 rt-2" />
    <div rd="40" bg="#FF0000" class="h-15 w-full">
      <div class="absolute left-50% -translate-x-50%" h-15 rd="50%" border="1 #e3c670" w="75%" />
      <div class="absolute left-50% -translate-x-50%" h-15 rd="50%" border="1 #e3c670" w="50%" />
      <div style="writing-mode: vertical-rl" flex="~ col justify-center items-center" text="xs #e3c670" font="bold" class="absolute left-50% tracking-1 -translate-x-50%" h-15 rd="50%" border="1 #e3c670" w="20%">
        {{ item.text }}
      </div>
    </div>
    <div h-2 w-10 bg="#e3c670" rd="lb-1 rb-1" />
    <div class="relative" w-10>
      <div class="lantern-tassel" />
      <div class="absolute left-50% -translate-x-50%" flex="~ col justify-center items-center">
        <div h-6 w="1px" bg="#FF0000" />
        <div h-1 w-2 rd="t-1" bg="#e3c670" />
        <div h-1 w-2 bg="#FF0000" />
        <div relative w-2>
          <div class="lantern-tassel__bottom" />
        </div>
      </div>
    </div>
  </div>
</div>

scss

        <style scoped lang="scss">
    @use 'sass:math';
    @use 'sass:string';
    @function getShadows($n, $space) {
      $result: '#{$space}px 0 0 #FF0000';
      @for $i from 2 through math.floor($n) {
        $result: '#{$result}, #{$i * $space}px 0 0 #FF0000';
      }
      @return string.unquote($result);
    }
    
    .lantern-tassel {
      position: absolute;
      left: 1.5px;
      width: 0.5px;
      height: 20px;
      box-shadow: getShadows(29, 1.2);
    }
    
    .lantern-tassel__bottom {
      position: absolute;
      left: -0.7px;
      width: 0.5px;
      height: 20px;
      box-shadow: getShadows(11, 0.7);
    }
</style>

효과

lantern