使用
html
[success]
<!--用的时候把<body> 和 </body> 去了 这两个是html基础文件-->
<!– 在页面最后引入 –>
<body>
<script src=”https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.1/dist/china-lantern.min.js”></script>
</body>
[/success]
php
[success]<?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.1/dist/china-lantern.min.js”></script>’;
}
?>
[/success]
注：使用 php 时只需加入 footer.php 等公共文件部分即可
实现
<!– 灯笼主 warpper ，用于 fixed 定位 –>
<div class=”lantern__warpper”></div>
<!– 灯笼核心 box ，渲染红色椭圆形背景 –>
<div class=”lantern__box”></div>
<!– 灯笼上吊线 line –>
<div class=”lantern__line”></div>
<!– 灯笼 box 内的黄色线 circle （外围线） –>
<div class=”lantern__circle”> </div>
<!– 灯笼 box 内的黄色线 ellipse （内围线） –>
<div class=”lantern__ellipse”></div>
<!– 灯笼 box 内的文字 –>
<div class=”lantern__text”>{textFirst}</div>
<!– 灯笼吊尾 tail –>
<div class=”lantern__tail”> </div>
<!– 灯笼吊尾下部的方形部分 rect –>
<div class=”lantern__rect”></div>
<!– 灯笼吊尾的圆形节点 junction ，这里使节点在 rect 之后会显得层级更自然 –>
<div class=”lantern__junction”></div>
相信看到节点设计后已经很一目了然了，这是一个纯 css 设计的灯笼节点。
核心摇摆动画：
$deg-swing: 8deg;
@keyframes lantern-swing {
0% {
transform: rotate(#{-$deg-swing});
}
100% {
transform: rotate(#{$deg-swing});
}
}
此外：
- 采用 scss 进行全动态设计，便于开发者只需要修改对应的变量值即可 diy 自己的灯笼样式。
- 全自动构建流程，支持修改灯笼文字。
- 最好的打包与 tree shake + css hack 即开即用。
- 支持手机端适配。
项目
中国灯笼：fz6m / china-lantern
使用建议：每逢元旦和新春假期期间使用。