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

最新推荐文章于 2024-08-17 09:44:52 发布

星野睡不醒

最新推荐文章于 2024-08-17 09:44:52 发布

阅读量2.2k

点赞数 3

分类专栏： Web 文章标签： css sass web html blog

本文链接：https://blog.csdn.net/qq_21567385/article/details/112061002

版权

Web 专栏收录该内容

64 篇文章

订阅专栏

效果

预览

实际

使用

默认

<body>

  <!-- 在页面最后引入 -->
  <script src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.1/dist/china-lantern.min.js"></script>

</body>

php

<?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>';
    }
?>

注：使用 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});
    }
  }