给你的网站添加一个中国新年灯笼挂件（网页/博客美化）

效果

预览

实际

使用

默认

<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 构建工具/功能库教程（三）：细化打包与工具库模板》

给你的网站添加一个中国新年灯笼挂件（网页/博客美化）相关推荐

NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
【嘉然live2d】来给WP网站添加一个live2
look,同款下图的成果~ 教程开始下载解压包,上传到你的主题目录上. 然后复制下面代码保存到主题目录的 footer.php文件放在</body>的下面,并修改成你的live ...
【转】博客美化(3)为博客添加一个漂亮的分享按钮
阅读目录 1.社会化分享 2.选择一个分享按钮 3.添加到博客园博客博客园美化相关文章目录:博客园博客美化相关文章目录在前2篇博客"博客美化(1)基本后台设置与样式设置"与&q ...
利用GitHub搭建一个酷炫免费的个人博客
转载自公众号:python_shequ 由于公众号的文章不易后续整理阅读,于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客,打算将公众号的文章搬过去,支持关键字搜索.分 ...
如何零基础零费用的在30分钟内用hugo+github pages创建一个专属于你的个人博客 - 简单快捷到建议人手一个
写这篇文章的原因是在网上看了很多的教程,踩了不少的坑,更多的白费了很多功夫,也没找到一篇从头到尾完整有效的个人建站方法. 有些教程年代久远,有些教程极为繁琐,有些教程压根跑不通. 为了方便自己,做个记 ...
【分享】博客美化(6)为你的博文自动添加目录
博客园美化相关文章目录:博客园博客美化相关文章目录这篇文章使用的代码来自于博客园的marvin,非常感谢.在他的文章:如何给你的为知笔记添加一个漂亮的导航目录中,介绍了给文章自动添加目录的过程,我当 ...
【分享】博客美化(6)为你的博文自动添加目录【转】
转自:http://www.cnblogs.com/asxinyu/p/4344153.html 阅读目录 1.目录样式文件 2.为文章添加固定的信息 3.自动生成目录代码博客园美化相关文章目录:博 ...
bulma.css_如何建立一个？ Bulma CSS的自适应博客设计
bulma.css by ZAYDEK 由ZAYDEK oo (Ooooooh) 如何建立一个? Bulma CSS的自适应博客设计 (How To Build A ? Responsive Blog ...
推荐！一个简单而又精致的博客系统
前言写这个博客系统的初衷是为了给那些不愿自己维护一个个人博客,但又觉得市面主流博客网站广告多.不够简洁等.所以我写这个系统的时候也是尽力让它尽量的简洁,但又带一点个人风格.目前自定义主题功能还没上线 ...

给你的网站添加一个中国新年灯笼挂件（网页/博客美化）

效果

使用

实现

项目

给你的网站添加一个中国新年灯笼挂件（网页/博客美化）相关推荐

最新文章

热门文章