效果
预览
实际
使用
默认
<body><!-- 在页面最后引入 --><script src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.1/dist/china-lantern.min.js"></script></body>
php
<?phpdate_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>';}
?>
注：使用 php 时只需加入 footer.php 等公共文件部分即可
实现
对于单个灯笼，我们采取以下节点结构：
<!-- 灯笼主 warpper ，用于 fixed 定位 --><div class="lantern__warpper"><!-- 灯笼核心 box ，渲染红色椭圆形背景 --><div class="lantern__box"><!-- 灯笼上吊线 line --><div class="lantern__line"></div><!-- 灯笼 box 内的黄色线 circle （外围线） --><div class="lantern__circle"><!-- 灯笼 box 内的黄色线 ellipse （内围线） --><div class="lantern__ellipse"><!-- 灯笼 box 内的文字 --><div class="lantern__text">{textFirst}</div></div></div><!-- 灯笼吊尾 tail --><div class="lantern__tail"><!-- 灯笼吊尾下部的方形部分 rect --><div class="lantern__rect"></div><!-- 灯笼吊尾的圆形节点 junction ，这里使节点在 rect 之后会显得层级更自然 --><div class="lantern__junction"></div></div></div></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
使用建议：每逢元旦和新春假期期间使用。
如果想了解更多打包的技术细节，可以参考学习 rollup 打包三部曲：
《 rollup2.3 构建工具/功能库教程（一）：从 babel7 到postcss8 》
《 rollup2.3 构建工具/功能库教程（二）：js 压缩与配置成型 》
《 rollup2.3 构建工具/功能库教程（三）：细化打包与工具库模板 》
