2. 程式人生 > 其它 >給你的網站新增一箇中國新年燈籠掛件（網頁/部落格美化）

給你的網站新增一箇中國新年燈籠掛件（網頁/部落格美化）

阿新 • • 發佈：2021-01-02

技術標籤：Webcsssasswebhtmlblog

效果

預覽

實際

使用

<body>

  <!-- 在頁面最後引入 -->
  <script src="https://cdn.jsdelivr.net/gh/fz6m/[email protected]/dist/china-lantern.min.js"></script>

</body>

實現

對於單個燈籠，我們採取以下節點結構：

  <!-- 燈籠主 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});
    }
  }

此外：

  1. 採用 scss 進行全動態設計，便於開發者只需要修改對應的變數值即可 diy 自己的燈籠樣式。

  2. 全自動構建流程，支援修改燈籠文字。

  3. 最好的打包與 tree shake + css hack 即開即用。

  4. 支援手機端適配。

專案

中國燈籠：fz6m / china-lantern

使用建議：每逢元旦和新春假期期間使用。

如果想了解更多打包的技術細節，可以參考學習 rollup 打包三部曲：

《 rollup2.3 構建工具/功能庫教程（一）：從 babel7 到postcss8 》

《 rollup2.3 構建工具/功能庫教程（二）：js 壓縮與配置成型 》

《 rollup2.3 構建工具/功能庫教程（三）：細化打包與工具庫模板 》

相關推薦

給你的網站新增一箇中國新年燈籠掛件（網頁/部落格美化）

技術標籤：Webcsssasswebhtmlblog 效果 預覽 實際 使用 <body> <!-- 在頁面最後引入 -->

使用Python實現畫一箇中國地圖

為什麼是Python 先來聊聊為什麼做資料分析一定要用Python或R語言。程式語言這麼多種，Java,PHP都很成熟，但是為什麼在最近熱火的資料分析領域，很多人選擇用Python語言？

30 位大佬，勾勒出一箇中國網路安全江湖

“人才既飽和，又匱乏。”某業內人士如此評價安全行業的現狀，上層人才匱乏，下層人才飽和。

位元組跳動面試題，給你一個每一項都是數值混亂順序的陣列，只要裡面正確順序的值輸出。如[5,1,3,6,2,7],只要[1,2,7]

//位元組跳動面試題，給你一個每一項都是數值混亂順序的陣列，只要裡面正確順序的值輸出，如[5,1,3,6,2,7],只要[1,2,7]

使用keybase給你的Github commit加上GPG Verified簽名認證（keybase教程）

技術標籤：Githubgithub安全gpgkeybasepgp 前言 你的專案 git commit 都是你本人提交的嗎？

部落格美化-新增音樂播放器

#前言 看著部落格聽著歌 #連結 還是各個大神的連結 https://github.com/MoePlayer/APlayerhttps://github.com/metowolf/MetingJS

在網頁/部落格中實現圖片居中和新增題注

技術標籤：H5/CSS 有些時候，我們想要在網頁/部落格中實現圖片的居中，並且新增題注，實現方式如下：

從上到下輸出二叉樹中每一層最右邊的節點（廣度優先遍歷）

題目描述： 從上到下輸出二叉樹中每一層最右邊的節點。如下圖二叉樹： 輸入為[1,2,3,4,5,\'null\',6,\'null\',\'null\',7]

記一次使用dapper的坑（資料庫與類對映）（轉）

本來是測試dapper轉換真正的mysql語句後是否能真正使用索引的，不過被一個地方卡住了，在查詢的時候一直不能對映強型別的值。找了大概1小時才找到處理的方式，記錄下來免得忘記。

一加 9R 手機 ColorOS 12（基於安卓 12）內測招募開啟

11 月 3 日訊息，一加社群今天下午釋出了 OnePlus 9R 5G ColorOS 12 x Android 12 內測招募公告。ColorOS 12 內測招募開始，OnePlus 9R 5G 的加油們快看過來，在這裡你能體驗到基於 Android 12 的 ColorOS 12，同時

應付Android面試看這一篇文就夠了（含面試真題）

前言 我的微信小號有一組特殊的朋友。 他們從 CSDN上看到我之前釋出的部落格後，留下郵箱詢要學習資料的，我在郵箱傳送資料之後我們互相新增微信認識聊上的，和他們溝通交流中可以明顯感覺他們的就業焦慮。

二層牛皮：愛登堡一腳蹬皮鞋 69 元（吊牌價 219 元）

二層牛皮鞋面，愛登堡男士一腳蹬休閒皮鞋報價 119 元，限時限量 50 元券，實付 69 元包郵，領券併購買。吊牌價 219 元，相當於 3.2 折優惠。使用最會買 App 下單，預計還能再返 11.38 元，返後 57.62 元包郵，點選下

給你的部落格園新增一隻萌萌的洛天依吧！（live2d-自制v3版本模型）

如上一篇文章提到，本來打算用@unsignzhang 的方法和模型把洛天依新增到部落格園

給你的網站新增炫酷的動畫註釋

前置 rough-notation 用於在網頁上建立註釋並設定註釋動畫的小型 JavaScript 庫。它還可以應用在一些常見前端框架中，比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它應用在我建立的部落格園面板中，

【原創！推薦！】不瞭解布隆過濾器？一文給你整的明明白白！

海量資料處理以及快取穿透這兩個場景讓我認識了 布隆過濾器 ，我查閱了一些資料來瞭解它，但是很多現成資料並不滿足我的需求，所以就決定自己總結一篇關於布隆過濾器的文章。希望通過這篇文章讓更多人瞭解布隆過濾器

教程|教你如何給你的頭像新增一個好看的國旗

今天朋友圈又火了，聽說原因是 @騰訊官網 就能得到一頂綠色的帽子，啊呸，是一個好看的國慶節頭像，可是聽說沒一會就502了，那麼我們自己動手實現一個吧

學習 Java 網站推薦給你

推薦幾個非常不錯的 Java 學習網站 LearnJava 線上 這是一個非常不錯的學習 Java 的線上網站，純免費。這是一個個人專案，旨在通過簡單有效的在瀏覽器中進行練習讓你快速掌握 Java 程式語言。通過直接從網路瀏覽器執

6 個珍藏已久 IDEA 小技巧，這一波全部分享給你！

每週趣圖 產品經理設計體驗/使用者實際體驗 本週就不寫技術分析文章了，分享幾個珍藏已久的 IDEA 的「騷技巧」，助你快速完成程式碼。

[轉]給你的網站增加護盾-開啟SSL【白嫖】

本文轉自：會打籃球的程式猿 原文連結：https://www.lzhpo.com/article/102 瞭解開啟SSL的作用

不懂 ZooKeeper？沒關係，這一篇給你講的明明白白

本來想系統回顧下 ZooKeeper的，可是網上沒找到一篇合自己胃口的文章，寫的差不多的，感覺大部分都是基於《從Paxos到ZooKeeper 分散式一致性原理與實踐》寫的，所以自己讀了一遍，加上專案中的使用，做個整理。加油