使用纯代码在你的网站上添加一个中国新年灯笼挂件

使用

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});
}
}

 

此外:

  1. 采用 scss 进行全动态设计,便于开发者只需要修改对应的变量值即可 diy 自己的灯笼样式。
  2. 全自动构建流程,支持修改灯笼文字。
  3. 最好的打包与 tree shake + css hack 即开即用。
  4. 支持手机端适配。

项目

中国灯笼:fz6m / china-lantern

使用建议:每逢元旦和新春假期期间使用。

给TA打赏
共{{data.count}}人
人已打赏
网站美化

博客网站下雪特效

2022-6-11 23:51:57

网站美化

WordPress网站的整个站变成了灰白色(哀悼代码)

2022-6-12 0:01:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧