纯CSS灯笼

马黑黑

声明，灯笼设计作者不是我，是爱前端也爱恋爱。我做了一些改动，一般能用于论坛。封装的CSS文件这里上传不了，论坛对上传文件不支持 .css 格式，所以我将其上传到了我的随意云网盘，地址：

  

https://638183.freep.cn/638183/rar/denglong.css

引用方式（在 HTML 代码之前写入）：

<link rel="stylesheet" href="https://638183.freep.cn/638183/rar/denglong.css" />

然后时HTML画灯笼的代码，完整代码样式如下：

<!-- 灯笼容器 -->

<div class="lantern-con" style="top:-30px;left:50%;">

<!-- 灯笼提线 -->

<div class="lantern-line"></div>

<!-- 灯笼主体 -->

<div class="lantern-light">

<!-- 灯笼主体线条 -->

<div class="lantern-circle">

<div class="lantern-rect">

<!-- 灯笼中间文字 -->

<div class="lantern-text">春節</div>

</div>

</div>

<!-- 灯笼穗 -->

<div class="lantern-tassel-top">

<div class="lantern-tassel-middle"></div>

<div class="lantern-tassel-bottom"></div>

</div>

</div>

</div>

注意看红色部分，我们可以用行内嵌入的CSS style 样式来设置灯笼的位置。作者爱前端也爱恋爱写这个CSS是灯笼主体用的是绝对定位，我改为了相对定位并对一些相关定位细节做了调整。

我在局域网论坛中做过测试，可以使用，不知这里情况怎么样。

马黑黑

春節

快樂

马黑黑

二楼代码：

1. <link rel="stylesheet" href="https://638183.freep.cn/638183/rar/denglong.css">
   
2. 
   
3. <div class="lantern-con" style="left:50px;top:-20px;">
   
4.         <div class="lantern-line"></div>
   
5.         <div class="lantern-light">
   
6.                 <div class="lantern-circle">
   
7.                         <div class="lantern-rect">
   
8.                                 <div class="lantern-text">春節</div>
   
9.                         </div>
   
10.                 </div>
    
11.                 <div class="lantern-tassel-top">
    
12.                         <div class="lantern-tassel-middle"></div>
    
13.                         <div class="lantern-tassel-bottom"></div>
    
14.                 </div>
    
15.         </div>
    
16. </div>
    
17. 
    
18. <div class="lantern-con" style="left:400px; top:-200px;">
    
19.         <div class="lantern-line"></div>
    
20.         <div class="lantern-light">
    
21.                 <div class="lantern-circle">
    
22.                         <div class="lantern-rect">
    
23.                                 <div class="lantern-text">快樂</div>
    
24.                         </div>
    
25.                 </div>
    
26.                 <div class="lantern-tassel-top">
    
27.                         <div class="lantern-tassel-middle"></div>
    
28.                         <div class="lantern-tassel-bottom"></div>
    
29.                 </div>
    
30.         </div>
    
31. </div>

复制代码

加林森

漂亮的灯笼制作，真好。

马黑黑

试试能不能放到浏览器视界的左上角。

在本页内使用灯笼CSS文件，无需再用 link 语句，因为二楼已经有了。直接写 HTML 部分的代码。

春節

马黑黑

五楼的代码：（注意第一行，重新定义了主容器的位置定位为固定定位）

1. <div class="lantern-con" style="position:fixed;left:5px;top:-20px;">
   
2.         <div class="lantern-line"></div>
   
3.         <div class="lantern-light">
   
4.                 <div class="lantern-circle">
   
5.                         <div class="lantern-rect">
   
6.                                 <div class="lantern-text">春節</div>
   
7.                         </div>
   
8.                 </div>
   
9.                 <div class="lantern-tassel-top">
   
10.                         <div class="lantern-tassel-middle"></div>
    
11.                         <div class="lantern-tassel-bottom"></div>
    
12.                 </div>
    
13.         </div>
    
14. </div>

复制代码

马黑黑

加林森 发表于 2022-1-23 11:00
漂亮的灯笼制作，真好。

纯CSS画的，不简单吧

加林森

马黑黑 发表于 2022-1-23 11:04
纯CSS画的，不简单吧

很好的。现在你又挂了一灯笼出来，挺好玩的。

马黑黑

加林森 发表于 2022-1-23 11:09
很好的。现在你又挂了一灯笼出来，挺好玩的。

你也学着去水吧挂一个

加林森

马黑黑 发表于 2022-1-23 11:10
你也学着去水吧挂一个

我去试试

马黑黑

加林森 发表于 2022-1-23 11:18
我去试试

开新帖子要有 link 语句

加林森

春節

快樂

马黑黑

加林森 发表于 2022-1-23 11:24
...

要去看新帖作品做，并尝试理解

加林森

马黑黑 发表于 2022-1-23 11:22
开新帖子要有 link 语句

挂在你楼下了。

马黑黑

加林森 发表于 2022-1-23 11:26
挂在你楼下了。

看到了

加林森

马黑黑 发表于 2022-1-23 11:25
要去看新帖作品做，并尝试理解

嗯嗯，慢慢学习，学仔细点才行。

加林森

春節

马黑黑

加林森 发表于 2022-1-23 11:27
嗯嗯，慢慢学习，学仔细点才行。

学会后反复练习几次就大致OK了。有些，像现在这个，绝大多数的代码不能改动，只加文本，每个灯笼能加两个字。还有就是，定位灯笼位置要根据需要来做，就是头一个 div 加 style 语句来完成。

加林森

马黑黑 发表于 2022-1-23 11:31
学会后反复练习几次就大致OK了。有些，像现在这个，绝大多数的代码不能改动，只加文本，每个灯笼能加两个 ...

嗯嗯

红影

这个好，正好春节要到了，挂两个灯笼很喜庆