新年新气象,网站**新年灯笼挂件
version: 1.6
<body>
<!-- 在页面最后引入 -->
<script src="https://cdn.jsdelivr.net/gh/fz6m/[email protected]/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/[email protected]/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;
}