给你的博客顶部添加灯笼特效,牛气冲天
给你的博客顶部添加灯笼特效,CSS3
查看效果
- 演示站点: 点击这里
自定义内容
- 可自定义灯笼
字体
1
2
3
4
5
6/* 修改灯笼的字体 */
.d-box .d1::after{
content: '牛年吉祥';}
.d-box1 .d1::after{
content: '万事顺利';
} - 可自定义灯笼
大小,位置
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);
} - 适配移动端,可设置
隐藏
,或者显示一个/调节灯笼的大小
,默认一个
- 可自定义灯笼的
阴影颜色,大小
Butterfly主题使用方法
- 打开主题文件夹找到
\themes\butterfly\layout\includes\header\nav.pug
加入以下代码
1 | .dengl |
- 引入
css
和js
引入到页面或者直接去我的git仓库下载修改,已上传
- 在
header
标签里面加入<div class="dengl"></div>
1 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Rr210/[email protected]/dl.css"> |
其他框架使用方法
- 将
baby
内的源码引入到header
标签或者其他标签下即可,源码在下方git中 - 可能会出现兼容性问题,请【留言】反馈谢谢
源码如下
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论