↓ 快轉到主要內容

一些格式筆記

·301 字·2 分鐘
技術筆記
目錄

　　受到 Wiwi.blog 這篇文章的影響，我才發現原來有這麼多好玩的東西可以用，所以我來特別紀錄一下，這樣以後我想用的時候就有個地方可複製貼上。不過這邊主要放 html 或 css 的用法，有關 markdown 的用法可以看這篇。

小字
#

　　首先是文字上方的小字像這樣子，這個功能原本好像原本是用在日文漢字標註假名用的，像這樣 : 綾地あやち寧々ねね 、 りしれ供ごんさ小しゃお

用法長的像下面⬇️這樣，我是看到 wiwi.blog 的這篇文章才知道有這東西

<ruby>
    漢字<rt>かんじ</rt>
</ruby>

輸出 : 漢字かんじ

跑馬燈
#

　　這個看起來就很酷的樣子，所以我決定要在主頁也放一個 !

Ciallo～(∠・ω< )⌒☆   𝑪𝒊𝒂𝒍𝒍𝒐～(∠・ω< )⌒☆   𝓒𝓲𝓪𝓵𝓵𝓸～(∠・ω< )⌒☆   𝐂𝐢𝐚𝐥𝐥𝐨～(∠・ω< )⌒☆   ℂ𝕚𝕒𝕝𝕝𝕠～(∠・ω< )⌒☆   𝘊𝘪𝘢𝘭𝘭𝘰～(∠・ω< )⌒☆   𝗖𝗶𝗮𝗹𝗹𝗼～(∠・ω< )⌒☆   𝙲𝚒𝚊𝚕𝚕𝚘～(∠・ω< )⌒☆   ᴄɪᴀʟʟᴏ～(∠・ω< )⌒☆   𝕮𝖎𝖆𝖑𝖑𝖔～(∠・ω< )⌒☆   ℭ𝔦𝔞𝔩𝔩𝔬～(∠・ω< )⌒☆   ᶜⁱᵃˡˡᵒ～(∠・ω< )⌒☆   ᑕ⫯Ꭿ𝘭𝘭𝖮～(∠・ω< )⌒☆   ☆⌒( >ω・∠)～ollɐıɔ

作法如下，直接貼到 maekdown 裡面就能用。不過因為我不會 hmtl 和 css 所以我是叫 AI 幫我產生程式碼的。

<style>
/* 跑馬燈外層容器 */
.marquee {
  overflow: hidden;        /* 超出容器的內容隱藏，避免出現捲軸 */
  white-space: nowrap;     /* 文字不換行，維持單行橫向排列 */
  box-sizing: border-box;  /* 寬高計算方式包含 padding / border */
}

/* 實際移動的文字內容 */
.marquee span {
  display: inline-block;   /* 讓 transform 與動畫能正常作用 */
  padding-left: 100%;      /* 一開始把文字推到畫面最右側外面 */
  animation: marquee 20s linear infinite;
  /* marquee：使用下面定義的動畫
     20s：跑完整一圈需要 20 秒（可自行調快慢）
     linear：等速移動
     infinite：無限循環 */
}

/* 定義跑馬燈動畫 */
@keyframes marquee {
  0% {
    transform: translateX(0);        /* 起始位置（右側外） */
  }
  100% {
    transform: translateX(-100%);    /* 移動到左側完全離開畫面 */
  }
}
</style>

<!-- 跑馬燈容器 -->
<div class="marquee">
  <!-- 跑馬燈實際顯示的文字內容 -->
  <span>
    Ciallo～(∠・ω< )⌒☆  &emsp; 
    𝑪𝒊𝒂𝒍𝒍𝒐～(∠・ω< )⌒☆  &emsp;
    𝓒𝓲𝓪𝓵𝓵𝓸～(∠・ω< )⌒☆ &emsp;
    𝐂𝐢𝐚𝐥𝐥𝐨～(∠・ω< )⌒☆ &emsp;
    ℂ𝕚𝕒𝕝𝕝𝕠～(∠・ω< )⌒☆ &emsp;
    𝘊𝘪𝘢𝘭𝘭𝘰～(∠・ω< )⌒☆ &emsp;
    𝗖𝗶𝗮𝗹𝗹𝗼～(∠・ω< )⌒☆ &emsp;
    𝙲𝚒𝚊𝚕𝚕𝚘～(∠・ω< )⌒☆ &emsp;
    ᴄɪᴀʟʟᴏ～(∠・ω< )⌒☆ &emsp;
    𝕮𝖎𝖆𝖑𝖑𝖔～(∠・ω< )⌒☆ &emsp;
    ℭ𝔦𝔞𝔩𝔩𝔬～(∠・ω< )⌒☆ &emsp;
    ᶜⁱᵃˡˡᵒ～(∠・ω< )⌒☆ &emsp;
    ᑕ⫯Ꭿ𝘭𝘭𝖮～(∠・ω< )⌒☆ &emsp;
    ☆⌒( >ω・∠)～ollɐıɔ
  </span>
</div>

模糊文字
#

　　像這樣 : Ciallo～(∠・ω< )⌒☆

<style>
.blur-hover {
  display: inline;              
  filter: blur(6px);
  transition: filter 0.3s ease;
}

.blur-hover:hover {
  filter: blur(0);
}
</style>

像這樣 : <span class="blur-hover">Ciallo～(∠・ω< )⌒☆</span>

把想要模糊的文字加在 <span class="blur-hover">模糊文字</span> 就 ok了

摺疊區塊
#

用法長這樣，你甚至可以在裡面用上前面提到的模糊文字和小字 !

<details>
  <summary>點我展開說明</summary>

  這裡是摺疊後才會看到的內容  
  可以放文字、圖片、甚至 HTML
</details>

範例 :

你知道為什麼濁水溪和大甲溪不能再一起嗎 ? 點我顯示答案 ! 因為他們 不是河不適合

鍵盤顯示
# 

<kbd>Ctrl</kbd>

範例 : 現在馬上按下 Alt + F4

點擊播放音效
#

這是問 AI 問出來的，但因為我這邊不會顯示按鈕的框框，所以額外加了一層 <kdb> 進去

<kbd>
    <button onclick="document.getElementById('sfx').play()">
    ▶ 點我播放音效
    </button>
</kbd>
<audio id="sfx" src="./sfx.mp3"></audio>

範例 :

總結
#

　　總結是因為 markdown 可以配合 html、css，所以可以做出很多好玩的效果，這是一般的社群平台辦不到的事 ! 　　

相關文章