给你的博客顶部添加灯笼特效,CSS3

查看效果

自定义内容

  1. 可自定义灯笼字体
    1
    2
    3
    4
    5
    6
    /* 修改灯笼的字体 */
    .d-box .d1::after{
    content: '牛年吉祥';}
    .d-box1 .d1::after{
    content: '万事顺利';
    }
  2. 可自定义灯笼大小,位置
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .d-box{
    position: fixed;
    width: 330px;
    /* 自定义灯笼的位置 */
    right: 0;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
    }
    .d-box1{
    position: fixed;
    width: 330px;
    /* 自定义灯笼的位置 */
    left: 0;
    top: 0;
    /* 自定义灯笼大小 */
    transform: scale(0.8);
    }
  3. 适配移动端,可设置隐藏,或者显示一个/调节灯笼的大小默认一个
  4. 可自定义灯笼的阴影颜色,大小

Butterfly主题使用方法

  1. 打开主题文件夹找到\themes\butterfly\layout\includes\header\nav.pug

加入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.dengl
.d-box
.d1
span
span
p
ul
li
li
li
span
li
li
.d2
span
span
p
ul
li
li
li
span
li
li
.d-box1
.d1
span
span
p
ul
li
li
li
span
li
li
.d2
span
span
p
ul
li
li
li
span
li
li
  1. 引入cssjs引入到页面或者直接去我的git仓库下载修改,已上传
  • header标签里面加入<div class="dengl"></div>
1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Rr210/Lantern@3.3/dl.css">
<script src="https://cdn.jsdelivr.net/gh/Rr210/Lantern@3.3/dl.js"></script>

其他框架使用方法

  1. baby内的源码引入到header标签或者其他标签下即可,源码在下方git中
  2. 可能会出现兼容性问题,请【留言】反馈谢谢

源码如下