admin管理员组

文章数量:1794759

Hexo

文章链接 ：Hanging lanterns | 唐志远の博客

标题

之前有小伙伴留言问我博客悬挂灯笼如何实现的，现在写一篇简单的教程。

悬挂灯笼效果

效果如下：

1. PC端
   
   
2. Mobile端
   
   
   
   

步骤

1. 新建CSS样式

   在 themes\Butterfly\source\css 文件下新建 CSS 文件，并命名为 lantern.css ( 当然名字随便取，只要在主题配置文件中引入对应的 CSS文件即可 )，将以下代码复制到新建的 lantern.css 中。

   /* 灯笼 Start */
   * {box-sizing: border-box;
   }
   /* 移动端显示/隐藏 /none/block，可自定义显示一个 */
   @media screen and (max-width: 970px) {.d-box1 {display: none;}.dengl .d-box {right: 0px;top: -40px;/* 自定义灯笼大小 */transform: scale(0.4);}
   }
   .dengl {position: fixed;z-index: 9;
   }
   /* .d-box,.d-box1{z-index: 9;} */
   .d-box {position: fixed;/* 自定义灯笼的位置 */right: 85px;top: 0;/* 自定义灯笼大小 */transform: scale(0.8);
   }
   .d-box1 {position: fixed;/* 自定义灯笼的位置 */left: 0;top: 0;/* 自定义灯笼大小 */transform: scale(0.8);
   }
   /* 修改灯笼的字体 */
   .d-box .d1::after {content: '牛年大吉';
   }
   .d-box1 .d1::after {content: '万事顺遂';
   }
   .d-box1 .d1,
   .d-box1 .d2,
   .d-box1 .d1::after,
   .d-box1 .d1::before,
   .d-box1 .d2::after,
   .d-box1 .d2::before,
   .d-box1 .d2 ul li span,
   .d-box1 .d1 ul li span {background-color: #f01f1a;border: 5px solid #5c1713;/* 自定义灯笼的阴影 *//* box-shadow: 0 5px 61px rgba(255, 240, 29, 0.88); */
   }
   .d1,
   .d2,
   .d1::after,
   .d1::before,
   .d2::after,
   .d2::before,
   .d2 ul li span,
   .d1 ul li span {background-color: #f01f1a;border: 5px solid #5c1713;/* 自定义灯笼的阴影 */box-shadow: 0 5px 61px #ff1d1d;
   }
   .d1::after,
   .d1::before {height: 82px;position: absolute;top: 0;content: '';font-size: 17px;
   }
   .d1,
   .d2 {position: relative;animation: swing 4s linear infinite;transform-origin: top center;
   }
   .d1 {width: 160px;top: 100px;height: 90px;right: 0;border-radius: 80px/49px;
   }
   .d1::before {top: -5px;right: 7px;width: 123px;border-radius: 62px/52px;
   }
   .d1::after {text-align: center;line-height: 90px;color: #ffe31d;font-weight: 600;top: -5px;right: 35px;width: 69px;border-radius: 41px/49px;
   }
   .d1 span {position: absolute;top: 84px;left: 49px;width: 50px;height: 16px;z-index: 2;border-radius: 0 0 10px 10px;background-color: #ffe31d;border: 5px solid #5c1713;
   }
   .d1 span:nth-child(2) {top: -17px;border-radius: 10px 10px 0 0;
   }
   .d1 p {position: absolute;top: -31px;left: 13px;width: 16px;height: 13px;border-radius: 25px;border: 5px solid #5c1713;border-bottom: 0;
   }
   .d1 ul {position: relative;top: 80px;left: 13px;width: 54px;display: flex;
   }
   .d1 li {flex: 1;list-style: none;height: 24px;margin: 0px 2.5px;width: 5px;border-radius: 5px;border-right: 3.5px solid #5c1713;
   }
   .d1 ul li:nth-child(3) {content: '';height: 50px;
   }
   .d1 ul li:nth-child(3)::before {content: '';position: absolute;top: 47px;left: 54px;width: 5px;height: 5px;border-radius: 5px 5px 10px 10px;background-color: #ffe31d;border: 5px solid #5c1713;
   }
   .d1 ul li span {position: absolute;top: 20px;left: 55px;width: 13px;height: 19px;border-radius: 14px;
   }
   .d2::after,
   .d2::before {position: absolute;height: 128px;top: -3px;content: '';
   }
   .d2 {width: 199px;height: 128px;top: -61px;right: -122px;border-radius: 98px/70px;
   }
   .d2::before {top: -8px;right: 18px;width: 143px;border-radius: 69px/67px;
   }
   /* 自定义背景图片 */
   .d2::after {top: -8px;right: 51px;width: 75px;border-radius: 57px/89px;background: url(.png) no-repeat;background-position: center;background-size: 92px auto;
   }
   .d2 span {position: absolute;top: 123px;left: 68px;width: 55px;height: 14px;z-index: 2;border-radius: 0 0 10px 10px;background-color: #ffe31d;border: 5px solid #5c1713;
   }
   .d2 span:nth-child(2) {top: -16px;border-radius: 10px 10px 0 0;
   }
   .d2 p {position: absolute;top: -32px;left: 13px;width: 19px;height: 13px;border-radius: 25px;border: 5px solid #5c1713;border-bottom: 0;
   }
   .d2 ul {position: relative;top: 121px;left: 32px;width: 53px;display: flex;
   }
   .d2 li {flex: 1;list-style: none;height: 24px;margin: 0px 3px;width: 4px;border-radius: 7px;border-right: 3px solid #5c1713;
   }
   .d2 ul li:nth-child(3) {content: '';height: 60px;
   }
   .d2 ul li:nth-child(3)::before {content: '';position: absolute;top: 59px;left: 53px;width: 9px;height: 6px;border-radius: 5px 5px 10px 10px;background-color: #ffe31d;border: 5px solid #5c1713;
   }
   .d2 ul li span {position: absolute;top: 21px;left: 54px;width: 18px;height: 17px;border-radius: 20px;
   }
   @keyframes swing {0% {transform: rotate(0);}25% {transform: rotate(-13deg);}50% {transform: rotate(0);}75% {transform: rotate(13deg);}100% {transform: rotate(0);}
   }
   /* 灯笼 END */
   

2. 新建PUG

   在 themes\Butterfly\layout\includes 文件夹下新建 lantern.pug ，

   .dengl.d-box.d1spanspanpullili  lispanli  li  .d2spanspanpullili  lispanli  li  .d-box1.d1spanspanpullili  lispanli  li  .d2spanspanpullili  lispanli  li   
   

3. 在 themes\Butterfly\layout\includes\head.pug 中引入lantern.pug 。

   具体位置请参考下图：
   

4. 在（_config.butterfly.yml）的inject.head中引入 lantern.css。

   具体位置请参考下图：
   

5. 重新编译文件再运行，即可看到效果。

遇到问题

如果在阅读过程中遇到什么问题 ，请在 评论区 留言 ，我会在第一时间内帮助您解决问题 。

本文标签： hexo