为网站增加喜庆灯笼特效

最新推荐文章于 2023-02-03 21:30:00 发布

「已注销」

最新推荐文章于 2023-02-03 21:30:00 发布

阅读量511

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_45794678/article/details/115339991

版权

这篇博客展示了如何为网站增加喜庆的灯笼特效，通过创建一个.vue文件，利用Vue的template、Script和CSS来设计和实现这个动态效果。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

源码

创建.vue文件，将以下内容保存。

template 布局

<template>
  <div>
    <div class="deng-box2">
      <div class="deng">
        <div class="xian" />
        <div class="deng-a">
          <div class="deng-b">
            <div class="deng-t">年</div>
          </div>
        </div>
        <div class="shui shui-a">
          <div class="shui-c" />
          <div class="shui-b" />
        </div>
      </div>
    </div>
    <div class="deng-box3">
      <div class="deng">
        <div class="xian" />
        <div class="deng-a">
          <div class="deng-b">
            <div class="deng-t">新</div>
          </div>
        </div>
        <div class="shui shui-a"