给你的博客顶部添加灯笼特效【牛气冲天】
CP'窝〃丨丨阅读:36丨244字
给你的博客顶部添加灯笼特效,CSS3
查看效果
- 演示站点: 点击这里
自定义内容
可自定义灯笼字体
CSS/* 修改灯笼的字体 */ .d-box .d1::after{ content: '牛年吉祥';} .d-box1 .d1::after{ content: '万事顺利';}
可自定义灯笼大小,位置
CSS.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);}
- 适配移动端,可设置
隐藏
,或者显示一个/调节灯笼的大小
,默认一个
- 可自定义灯笼的
阴影颜色,大小
Butterfly主题使用方法
- 打开主题文件夹找到
\themes\butterfly\layout\includes\header\nav.pug
- 打开主题文件夹找到
加入以下代码(点击展开)Code1
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
引入
css
或者直接去我的git仓库下载修改,已上传CODE<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Rr210/Lantern@3.1/dl.css">
其他框架使用方法
- 将
baby
内的源码引入到header
标签或者其他标签下即可,源码在下方git中 - 可能会出现兼容性问题,请【留言】反馈谢谢