新年新气象，网站中国新年灯笼挂件
version: 1.6
<body>
<!-- 在页面最后引入 -->
<script src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.6/dist/china-lantern.min.js"></script>
</body> <?php
date_default_timezone_set('PRC');
$year = date("Y");
$month = date("n");
$day = intval(date("d"));
$is_current_year = $year == 2021;
$is_new_year_day = $month == 1 && $day < 4; // 1.1 ~ 1.3
$is_spring_festival = $month == 2 && $day > 9 && $day < 27; // 2.10 ~ 2.26
$is_show = $is_new_year_day || $is_spring_festival;
if($is_current_year && $is_show) {
echo '<script src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.6/dist/china-lantern.min.js"></script>';
}
?>-
安装依赖
yarn
-
在
./src/styles自定义样式，在./build/minifier.js自定义灯笼文字 -
构建
yarn build
之后就可以在
./dist/china-lantern.min.js得到你的自定义脚本
当你发现灯笼大小不合适或者被其他层级高的元素遮挡时，可以考虑自行修改灯笼位置的样式重新构建脚本，或者调整相关内容的 z-index 。
挂钩类：.j-china-lantern
/* 灯笼默认的 z-index: 999; */
/* 提高灯笼的层级 */
.j-china-lantern .lantern__warpper {
z-index: 9999;
}
/* 提高单个灯笼的层级：左灯笼 */
.j-china-lantern .lantern__warpper:not(.lantern__secondary) {
z-index: 9999;
}
/* 提高单个灯笼的层级：右灯笼 */
.j-china-lantern .lantern__secondary {
z-index: 9999;
}