给你的博客顶部添加灯笼特效【牛气冲天】

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

查看效果

• 演示站点： 点击这里

自定义内容

1. 可自定义灯笼字体

   CSS/* 修改灯笼的字体 */
   .d-box .d1::after{    
       content: '牛年吉祥';}
   .d-box1 .d1::after{    
       content: '万事顺利';}

2. 可自定义灯笼大小,位置

   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);}

3. 适配移动端，可设置隐藏，或者显示一个/调节灯笼的大小，默认一个
4. 可自定义灯笼的阴影颜色,大小

5. 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. 引入css或者直接去我的git仓库下载修改，已上传

   CODE<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Rr210/Lantern@3.1/dl.css">

其他框架使用方法

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

源码如下

• 已上传到Github【 点击这里 】
• 码云Gitee【点击这里】