纯CSS灯笼

马黑黑 发表于 2022-1-23 10:50

<div>声明，灯笼设计作者不是我，是<font color="#0000ff">爱前端也爱恋爱</font>。我做了一些改动，一般能用于论坛。封装的CSS文件这里上传不了，论坛对上传文件不支持 .css 格式，所以我将其上传到了我的随意云网盘，地址：</div><div>  </div><div>https://638183.freep.cn/638183/rar/denglong.css</div><div><br></div><div>引用方式（在 HTML 代码之前写入）：</div><div><br></div><div><link rel="stylesheet" href="https://638183.freep.cn/638183/rar/denglong.css" /></div><div><br></div><div>然后时HTML画灯笼的代码，完整代码样式如下：</div><div><br></div><div><div></div><div><div class="lantern-con" <font color="#ff0000">style="top:-30px;left:50%;"</font>></div><div><span style="white-space:pre"> </span></div><div><span style="white-space:pre"> </span><div class="lantern-line"></div></div><div><span style="white-space:pre"> </span></div><div><span style="white-space:pre"> </span><div class="lantern-light"></div><div><span style="white-space:pre"> </span></div><div><span style="white-space:pre"> </span><div class="lantern-circle"></div><div><span style="white-space:pre"> </span><div class="lantern-rect"></div><div><span style="white-space:pre"> </span></div><div><span style="white-space:pre"> </span><div class="lantern-text">春節</div></div><div><span style="white-space:pre"> </span></div></div><div><span style="white-space:pre"> </span></div></div><div><span style="white-space:pre"> </span></div><div><span style="white-space:pre"> </span><div class="lantern-tassel-top"></div><div><span style="white-space:pre"> </span><div class="lantern-tassel-middle"></div></div><div><span style="white-space:pre"> </span><div class="lantern-tassel-bottom"></div></div><div><span style="white-space:pre"> </span></div></div><div><span style="white-space:pre"> </span></div></div><div></div></div></div><div><br></div><div>注意看红色部分，我们可以用行内嵌入的CSS style 样式来设置灯笼的位置。作者<font color="#0000ff">爱前端也爱恋爱</font>写这个CSS是灯笼主体用的是绝对定位，我改为了相对定位并对一些相关定位细节做了调整。</div><div><br></div><div>我在局域网论坛中做过测试，可以使用，不知这里情况怎么样。</div><div><br></div>

马黑黑 发表于 2022-1-23 10:55

马黑黑 发表于 2022-1-23 10:55

二楼代码：

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

<div class="lantern-con" style="left:50px;top:-20px;">
<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>

<div class="lantern-con" style="left:400px; top:-200px;">
<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>

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

漂亮的灯笼制作，真好。{:4_190:}

马黑黑 发表于 2022-1-23 11:00

<p>试试能不能放到浏览器视界的左上角。</p>
<p>在本页内使用灯笼CSS文件，无需再用 link 语句，因为二楼已经有了。直接写 HTML 部分的代码。</p>

<div class="lantern-con" style="position:fixed;left:5px;top:-20px;">
<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>

马黑黑 发表于 2022-1-23 11:01

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

<div class="lantern-con" style="position:fixed;left:5px;top:-20px;">
<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>

马黑黑 发表于 2022-1-23 11:04

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

纯CSS画的，不简单吧

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

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

很好的。现在你又挂了一灯笼出来，挺好玩的。{:4_190:}

马黑黑 发表于 2022-1-23 11:10

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

你也学着去水吧挂一个

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

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

我去试试

马黑黑 发表于 2022-1-23 11:22

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

开新帖子要有 link 语句

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

马黑黑 发表于 2022-1-23 11:25

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

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

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

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

挂在你楼下了。{:4_189:}

马黑黑 发表于 2022-1-23 11:26

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

看到了

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

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

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

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

马黑黑 发表于 2022-1-23 11:31

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

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

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

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

嗯嗯

红影发表于 2022-1-23 14:24

这个好，正好春节要到了，挂两个灯笼很喜庆{:4_173:}

页: [1] 2 3 4

花潮论坛's Archiver

纯CSS灯笼