果有一本圣經，大家都按照圣經的標準寫網頁，那世界將更加的標準化和美好。這本圣經就是TailwindCSS。

什么是 Tailwind CSS？

Tailwind CSS 是一個流行的 CSS 框架，旨在幫助開發者快速構建現代化的、響應式的 Web 界面。與其他 CSS 框架不同，Tailwind CSS 強調的是原子級的 CSS 類，通過將各種樣式定義為獨立的類，使開發者可以輕松地組合和應用這些類，以構建出所需的樣式。

簡言之就是 TailwindCSS提供了一套定義好了的class類字典，你只需要拿著這個字典，通過組合字典中的類來實現各種樣式的設計。

Tailwind CSS 提供了大量的 CSS 類，涵蓋了常見的樣式和布局需求，如顏色、間距、邊框、字體等。開發者可以通過在 HTML 元素上添加這些類來實現所需的樣式，而無需自己編寫大量的 CSS 代碼。Tailwind CSS的好處，包括標準化、靈活性、更容易的調試、響應式設計、可定制性、更好的組合性、一致性和與UI工具包的集成。

Tailwind CSS 的主要特點包括：

1. 高度可定制性：Tailwind CSS 允許開發者通過配置文件自定義樣式和類名，以適應項目的需求和設計風格。
2. 響應式設計支持：Tailwind CSS 提供了一套響應式的類，可以根據不同的屏幕尺寸和設備來應用相應的樣式。
3. 提高開發效率：通過使用預定義的類，開發者可以快速構建界面，減少編寫和管理大量 CSS 代碼的工作量。
4. 豐富的工具集成：Tailwind CSS 提供了一些實用的工具和插件，如構建工具、編輯器插件等，以提高開發效率和開發體驗。

盡管 Tailwind CSS 的學習曲線可能相對較陡，但一旦熟悉并掌握了它的工作原理，它可以成為一個強大而靈活的工具，幫助開發者快速構建出現代化的、高度可定制的 Web 界面。

除了以上提到的TailwindCss的好處外，我認為最重要的一點就是保證代碼的可重用、可復制。這對于現代團隊協作開發來說顯得非常重要。 我們都在重復造輪子，以至于網絡充斥太多的僵尸代碼。如果有一本圣經，大家都按照圣經的標準寫網頁，那世界將更加的標準化和美好。

采用 TailwindCss的7個理由

簡而言之，Tailwind CSS之所以如此特別，是因為它讓您可以自由地使用簡單的構建塊來設計您的網站。請參閱下文，了解其實現方式。

1. 效用優先的方法

Tailwind CSS 不提供預先設計的組件，而是提供各種實用類，可以將它們組合起來以創建獨特的設計。您玩過樂高積木嗎？使用 Tailwind CSS 構建網站可以看作是使用樂高積木。Tailwind CSS 不會給您一個固定的玩具，而是給您許多小零件（“實用類”），您可以按照自己喜歡的任何方式將它們組合在一起。這讓您可以為您的網站創建獨特的個性化設計。

這種方法與傳統的 CSS 框架形成鮮明對比，后者通常帶有預制樣式的組件。這些組件可能快速而簡單，但有時它們的外觀或工作方式可能并不完全符合您的要求。使用 Tailwind，自定義過程更加直觀。您可以直接將樣式添加到 HTML 元素中，使設計過程變得清晰直接。

2.可重用性和一致性

學習了實用類后，您可以輕松地在網站的不同部分復制設計，而無需重復編寫自定義 CSS。這將加快開發過程并確保整個 Web 項目的一致外觀。

3.清除未使用的樣式功能

Tailwind CSS 的一個重要功能是它能夠自動從最終的 CSS 文件中刪除未使用的樣式。在開發階段，通常會嘗試不同的樣式，這可能會導致 CSS 臃腫。Tailwind CSS 的“清除”功能可確保只有 HTML 中實際使用的樣式才會出現在最終的樣式表中，從而優化性能。

4. 減少自定義代碼

雖然 Tailwind CSS 允許在需要時自定義 CSS，但其廣泛的實用程序類庫最大限度地減少了對它的需要。通過更多地依賴 Tailwind 的優化類而不是自定義樣式，您可以確保代碼保持干凈高效。

5.簡化的工作流程

使用 Tailwind CSS 可以更直接地設計樣式。開發人員無需在 HTML 文件和單獨的 CSS 樣式表之間移動，而是可以直接在 HTML 中應用樣式。這使得設計更快、更簡單。

6. 與其他工具配合良好

Tailwind CSS 不依賴于特定的 JavaScript 框架。無論您使用的是 React、Vue、Angular 還是純 JavaScript，Tailwind 都可以順利集成。這種靈活性意味著您可以將 Tailwind 整合到各種項目中，而不必擔心兼容性問題。

7.持續更新和社區支持

Tailwind 團隊和社區非常活躍，不斷致力于改進框架和與其他工具的集成。隨著網絡環境的發展，Tailwind CSS 也在不斷發展，確保它在各種開發環境中保持兼容性和相關性。

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

找一顆屬于你自己的星星吧

它會給你指引方向

一直到天明

- 2024.04.12 -

在網頁設計中，動畫效果是吸引用戶眼球的重要手段。CSS動畫中的過渡屬性（transition）和動畫（animation）屬性，就像是設計師手中的魔法棒，可以讓元素在頁面上動起來，增加視覺吸引力，提升用戶體驗。

今天，我們就來揭秘這兩個神奇的屬性，看看它們是如何讓網頁變得生動活潑的。

一、過渡屬性（transition）

過渡屬性是CSS中的一種基本動畫效果，它可以讓元素的某個屬性在一定的時間內平滑地從一個值變化到另一個值。這種變化可以是顏色、大小、位置等任何可以改變的屬性。

屬性值

1、transition-property：指定要執行過渡的屬性

• 多個屬性間使用,隔開；
• 如果所有屬性都需要過渡，則使用all關鍵字；
• 大部分屬性都支持過渡效果；
• 注意過渡時必須是從一個有效數值向另外一個有效數值進行過渡；

2、transition-duration：指定過渡效果的持續時間

• 時間單位：s 和 ms（1s=1000ms）

3、transition-delay：過渡效果的延遲，等待一段時間后在執行過渡

4、transition-timing-function：過渡的時序函數

• linear勻速運動

transition-timing-function: linear;

• ease 默認值，慢速開始，先加速后減速

transition-timing-function: ease;

• ease-in 加速運動

transition-timing-function: ease-in;

• ease-out 減速運動

transition-timing-function: ease-out;

• ease-in-out 先加速后減速

transition-timing-function: ease-in-out;

• cubic-bezier()來指定時序函數

transition-timing-function: cubic-bezier(0.17, 1.79, 0.68, -0.69);

• steps()分步執行過渡效果，可以設置第二個值：

end，在時間結束時執行過渡（默認值）；start，在時間開始時執行過渡

/* transition-timing-function: steps(2, end); */
transition-timing-function: steps(2);

transition-timing-function: steps(2, start);

5、transition：可以同時設置過渡相關的所有屬性

只有一個要求，如果要寫延遲，則兩個時間中第一個是持續時間，第二個是延遲時間。

示例：

/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;

CSS中的animation屬性是一個功能強大的工具，它允許開發者通過純CSS的方式創建豐富的動畫效果，從而增強網頁的交互性和視覺吸引力。

二、動畫（animation）屬性

動畫（animation）是CSS中的另一種屬性，它比過渡更強大，可以創建更復雜的動畫效果。動畫允許我們定義關鍵幀，然后在這些關鍵幀之間創建平滑的過渡。

這意味著，我們可以讓元素在一段時間內完成一系列的樣式變化，從而創建出更豐富、更生動的動畫效果。

設置動畫效果，必須先要設置一個關鍵幀，關鍵幀設置了動畫執行每一個步驟

@keyframes test {
from {
margin-left: 0;
}

to {
margin-left: 900px;
}
}

屬性值：

1、animation-name：此屬性指定要綁定到選擇器的關鍵幀名稱。關鍵幀是定義動畫序列的地方，通過@keyframes規則創建。

2、animation-duration：定義動畫完成一個周期所需的時間長度，可以設置成秒(s)或毫秒(ms)。必須明確指定該屬性，因為默認值是0，如果設置為0，則動畫不會播放。

3、animation-timing-function：指定動畫如何完成一個周期的時間曲線，例如線性、緩動等。這決定了動畫的速度在整個周期內是如何變化的。

4、animation-delay：設定動畫在開始前延遲的時間，同樣可設置單位為秒或毫秒。可以用來延遲動畫的開始時間。

5、animation-iteration-count：確定動畫循環播放的次數，可以是特定的數字或者infinite表示無限循環。

• infinite 無限執行

6、animation-direction：規定動畫在每次循環時是否反向播放，常用的值有normal（正常）和alternate（交替）。

• normal 從from向to運行，每次都是這樣，默認值
• reverse 從to向from運行，每次都是這樣
• alternate 從from向to運行，重復執行動畫時反向執行
• alternate-reverse 從to向from運行，重復執行動畫時反向執行

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！云端源想

7、animation-fill-mode：定義動畫在開始前和結束后的狀態，比如可見或隱藏。

• none 動畫執行完畢，元素回到原來位置，默認值
• forwards 動畫執行完畢，元素會停止在動畫結束的位置
• backwards 動畫延時等待時，元素就會處于開始位置
• both 結合了forwards和backwards

8、animation-play-state：控制動畫是否正在運行或暫停，常見的值有running（運行）和paused（暫停）。

此外，在使用animation屬性時，至少需要指定兩個屬性：動畫的名稱和動畫的持續時間。其他屬性可以根據需要選擇性地設置，以達到預期的動畫效果。

示例

/* animation-name: test;
animation-duration: 2s;
animation-delay: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: both; */

animation: test 2s 2s linear infinite alternate both;

總結來說，CSS的animation屬性提供了一種在不使用JavaScript的情況下，通過純CSS實現網頁元素動畫的方式。它能夠使元素從一種樣式平滑過渡到另一種樣式，增強用戶的視覺體驗。

通過這篇文章，我們了解了CSS動畫中的過渡屬性和動畫屬性的基本概念和應用。它們可以幫助我們創建出各種吸引人的動畫效果，讓我們的網頁更加生動有趣。

記住，好的動畫效果應該是恰到好處的，過多的動畫可能會讓用戶感到困擾。所以，讓我們一起用好這兩個屬性，創造出更好的用戶體驗吧！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

<div class="loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

body {
 margin: 0;
 height: 100vh; /*=100%*/
 display: flex; /*flex布局*/
 align-items: center; /*flex布局：垂直居中*/
 justify-content: center; /*flex布局：水平居中*/
 background-color: black;
}
.loading {
 width: 10em;
 height: 10em;
 display: grid; /*grid布局*/
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.5em; /*grid 每個item之間的間距*/
}
/**
* --name 是css中定義變量的方式
* 可以直接用 var(--name) 使用
*/
.loading span {
 background-color: var(--color); /*背景顏色*/
}
.loading span:nth-child(2n+2) {
 /*n=0: 2*/
 /*n=1: 4*/
 /*n=2: 6*/
 /*n=3: 8*/
 /*n=4: 10(不存在)*/
 --color: #f13f84;
}
.loading span:nth-child(4n+3) {
 /*n=0: 3*/
 /*n=1: 7*/
 /*n=2: 11(不存在)*/
 --color: #46b0ff;
}
.loading span:nth-child(4n+1) {
 /*n=0: 1*/
 /*n=1: 5*/
 /*n=2: 9*/
 /*n=3: 13(不存在)*/
 --color: #44bb44;
}

.loading {
 ...
 transform: rotate(45deg); /*旋轉45°*/
}
.loading span {
 background-color: var(--color);
 /**
 * 動畫名字是blinking
 * 動畫整個時間是2s
 * 每個元素的執行延時時間 var(--delay)
 * 動畫的速度曲線 由慢到快 ease-in-out
 * 永久執行 infinite
 */
 animation: blinking 2s var(--delay) ease-in-out infinite;
 animation-fill-mode: backwards;
}
/**
* 每個元素執行動畫延時時間變量
*/
.loading span:nth-child(7) {
 --delay: 0s;
}
.loading span:nth-child(4n+4) {
 --delay: 0.2s;
}
.loading span:nth-child(4n+1) {
 --delay: 0.4s;
}
.loading span:nth-child(4n+2) {
 --delay: 0.6s;
}
.loading span:nth-child(3) {
 --delay: 0.8s;
}
/**
* 動畫效果
*/
@keyframes blinking {
 0%, 20% {
 transform: rotate(0deg) scale(0);
 }
 40%, 80% {
 /*
 * 旋轉一圈rotate(1turn)[轉、圈（Turns）。一個圓共1圈]
 * 縮放 scale 如果大于1就代表放大；如果小于1就代表縮小
 */
 transform: rotate(1turn) scale(1);
 }
 100% {
 transform: rotate(2turn) scale(0);
 }
}

animation: name duration timing-function delay iteration-count direction;