整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果有一本圣經(jīng)，大家都按照圣經(jīng)的標(biāo)準(zhǔn)寫網(wǎng)頁，那世界將更加的標(biāo)準(zhǔn)化和美好。這本圣經(jīng)就是TailwindCSS。
Tailwind CSS 是一個(gè)流行的 CSS 框架，旨在幫助開發(fā)者快速構(gòu)建現(xiàn)代化的、響應(yīng)式的 Web 界面。與其他 CSS 框架不同，Tailwind CSS 強(qiáng)調(diào)的是原子級的 CSS 類，通過將各種樣式定義為獨(dú)立的類，使開發(fā)者可以輕松地組合和應(yīng)用這些類，以構(gòu)建出所需的樣式。
簡言之就是 TailwindCSS提供了一套定義好了的class類字典，你只需要拿著這個(gè)字典，通過組合字典中的類來實(shí)現(xiàn)各種樣式的設(shè)計(jì)。
Tailwind CSS 提供了大量的 CSS 類，涵蓋了常見的樣式和布局需求，如顏色、間距、邊框、字體等。開發(fā)者可以通過在 HTML 元素上添加這些類來實(shí)現(xiàn)所需的樣式，而無需自己編寫大量的 CSS 代碼。Tailwind CSS的好處，包括標(biāo)準(zhǔn)化、靈活性、更容易的調(diào)試、響應(yīng)式設(shè)計(jì)、可定制性、更好的組合性、一致性和與UI工具包的集成。
Tailwind CSS 的主要特點(diǎn)包括：
盡管 Tailwind CSS 的學(xué)習(xí)曲線可能相對較陡，但一旦熟悉并掌握了它的工作原理，它可以成為一個(gè)強(qiáng)大而靈活的工具，幫助開發(fā)者快速構(gòu)建出現(xiàn)代化的、高度可定制的 Web 界面。
除了以上提到的TailwindCss的好處外，我認(rèn)為最重要的一點(diǎn)就是保證代碼的可重用、可復(fù)制。這對于現(xiàn)代團(tuán)隊(duì)協(xié)作開發(fā)來說顯得非常重要。 我們都在重復(fù)造輪子，以至于網(wǎng)絡(luò)充斥太多的僵尸代碼。如果有一本圣經(jīng)，大家都按照圣經(jīng)的標(biāo)準(zhǔn)寫網(wǎng)頁，那世界將更加的標(biāo)準(zhǔn)化和美好。
簡而言之，Tailwind CSS之所以如此特別，是因?yàn)樗屇梢宰杂傻厥褂煤唵蔚臉?gòu)建塊來設(shè)計(jì)您的網(wǎng)站。請參閱下文，了解其實(shí)現(xiàn)方式。
Tailwind CSS 不提供預(yù)先設(shè)計(jì)的組件，而是提供各種實(shí)用類，可以將它們組合起來以創(chuàng)建獨(dú)特的設(shè)計(jì)。您玩過樂高積木嗎？使用 Tailwind CSS 構(gòu)建網(wǎng)站可以看作是使用樂高積木。Tailwind CSS 不會(huì)給您一個(gè)固定的玩具，而是給您許多小零件（“實(shí)用類”），您可以按照自己喜歡的任何方式將它們組合在一起。這讓您可以為您的網(wǎng)站創(chuàng)建獨(dú)特的個(gè)性化設(shè)計(jì)。
這種方法與傳統(tǒng)的 CSS 框架形成鮮明對比，后者通常帶有預(yù)制樣式的組件。這些組件可能快速而簡單，但有時(shí)它們的外觀或工作方式可能并不完全符合您的要求。使用 Tailwind，自定義過程更加直觀。您可以直接將樣式添加到 HTML 元素中，使設(shè)計(jì)過程變得清晰直接。
學(xué)習(xí)了實(shí)用類后，您可以輕松地在網(wǎng)站的不同部分復(fù)制設(shè)計(jì)，而無需重復(fù)編寫自定義 CSS。這將加快開發(fā)過程并確保整個(gè) Web 項(xiàng)目的一致外觀。
Tailwind CSS 的一個(gè)重要功能是它能夠自動(dòng)從最終的 CSS 文件中刪除未使用的樣式。在開發(fā)階段，通常會(huì)嘗試不同的樣式，這可能會(huì)導(dǎo)致 CSS 臃腫。Tailwind CSS 的“清除”功能可確保只有 HTML 中實(shí)際使用的樣式才會(huì)出現(xiàn)在最終的樣式表中，從而優(yōu)化性能。
雖然 Tailwind CSS 允許在需要時(shí)自定義 CSS，但其廣泛的實(shí)用程序類庫最大限度地減少了對它的需要。通過更多地依賴 Tailwind 的優(yōu)化類而不是自定義樣式，您可以確保代碼保持干凈高效。
使用 Tailwind CSS 可以更直接地設(shè)計(jì)樣式。開發(fā)人員無需在 HTML 文件和單獨(dú)的 CSS 樣式表之間移動(dòng)，而是可以直接在 HTML 中應(yīng)用樣式。這使得設(shè)計(jì)更快、更簡單。
Tailwind CSS 不依賴于特定的 JavaScript 框架。無論您使用的是 React、Vue、Angular 還是純 JavaScript，Tailwind 都可以順利集成。這種靈活性意味著您可以將 Tailwind 整合到各種項(xiàng)目中，而不必?fù)?dān)心兼容性問題。
Tailwind 團(tuán)隊(duì)和社區(qū)非常活躍，不斷致力于改進(jìn)框架和與其他工具的集成。隨著網(wǎng)絡(luò)環(huán)境的發(fā)展，Tailwind CSS 也在不斷發(fā)展，確保它在各種開發(fā)環(huán)境中保持兼容性和相關(guān)性。
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎？
找一顆屬于你自己的星星吧
它會(huì)給你指引方向
一直到天明
- 2024.04.12 -
在網(wǎng)頁設(shè)計(jì)中，動(dòng)畫效果是吸引用戶眼球的重要手段。CSS動(dòng)畫中的過渡屬性（transition）和動(dòng)畫（animation）屬性，就像是設(shè)計(jì)師手中的魔法棒，可以讓元素在頁面上動(dòng)起來，增加視覺吸引力，提升用戶體驗(yàn)。
今天，我們就來揭秘這兩個(gè)神奇的屬性，看看它們是如何讓網(wǎng)頁變得生動(dòng)活潑的。
過渡屬性是CSS中的一種基本動(dòng)畫效果，它可以讓元素的某個(gè)屬性在一定的時(shí)間內(nèi)平滑地從一個(gè)值變化到另一個(gè)值。這種變化可以是顏色、大小、位置等任何可以改變的屬性。
屬性值
1、transition-property：指定要執(zhí)行過渡的屬性
2、transition-duration：指定過渡效果的持續(xù)時(shí)間
3、transition-delay：過渡效果的延遲，等待一段時(shí)間后在執(zhí)行過渡
4、transition-timing-function：過渡的時(shí)序函數(shù)
transition-timing-function: linear;transition-timing-function: ease;transition-timing-function: ease-in;transition-timing-function: ease-out;transition-timing-function: ease-in-out;transition-timing-function: cubic-bezier(0.17, 1.79, 0.68, -0.69);end，在時(shí)間結(jié)束時(shí)執(zhí)行過渡（默認(rèn)值）；start，在時(shí)間開始時(shí)執(zhí)行過渡
/* transition-timing-function: steps(2, end); */
transition-timing-function: steps(2);transition-timing-function: steps(2, start);5、transition：可以同時(shí)設(shè)置過渡相關(guān)的所有屬性
只有一個(gè)要求，如果要寫延遲，則兩個(gè)時(shí)間中第一個(gè)是持續(xù)時(shí)間，第二個(gè)是延遲時(shí)間。
示例：
/* transition: margin-left 2s 1s; */
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;CSS中的animation屬性是一個(gè)功能強(qiáng)大的工具，它允許開發(fā)者通過純CSS的方式創(chuàng)建豐富的動(dòng)畫效果，從而增強(qiáng)網(wǎng)頁的交互性和視覺吸引力。
動(dòng)畫（animation）是CSS中的另一種屬性，它比過渡更強(qiáng)大，可以創(chuàng)建更復(fù)雜的動(dòng)畫效果。動(dòng)畫允許我們定義關(guān)鍵幀，然后在這些關(guān)鍵幀之間創(chuàng)建平滑的過渡。
這意味著，我們可以讓元素在一段時(shí)間內(nèi)完成一系列的樣式變化，從而創(chuàng)建出更豐富、更生動(dòng)的動(dòng)畫效果。
設(shè)置動(dòng)畫效果，必須先要設(shè)置一個(gè)關(guān)鍵幀，關(guān)鍵幀設(shè)置了動(dòng)畫執(zhí)行每一個(gè)步驟
@keyframes test {
from {
margin-left: 0;
}
to {
margin-left: 900px;
}
}屬性值：
1、animation-name：此屬性指定要綁定到選擇器的關(guān)鍵幀名稱。關(guān)鍵幀是定義動(dòng)畫序列的地方，通過@keyframes規(guī)則創(chuàng)建。
2、animation-duration：定義動(dòng)畫完成一個(gè)周期所需的時(shí)間長度，可以設(shè)置成秒(s)或毫秒(ms)。必須明確指定該屬性，因?yàn)槟J(rèn)值是0，如果設(shè)置為0，則動(dòng)畫不會(huì)播放。
3、animation-timing-function：指定動(dòng)畫如何完成一個(gè)周期的時(shí)間曲線，例如線性、緩動(dòng)等。這決定了動(dòng)畫的速度在整個(gè)周期內(nèi)是如何變化的。
4、animation-delay：設(shè)定動(dòng)畫在開始前延遲的時(shí)間，同樣可設(shè)置單位為秒或毫秒。可以用來延遲動(dòng)畫的開始時(shí)間。
5、animation-iteration-count：確定動(dòng)畫循環(huán)播放的次數(shù)，可以是特定的數(shù)字或者infinite表示無限循環(huán)。
6、animation-direction：規(guī)定動(dòng)畫在每次循環(huán)時(shí)是否反向播放，常用的值有normal（正常）和alternate（交替）。
想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想
7、animation-fill-mode：定義動(dòng)畫在開始前和結(jié)束后的狀態(tài)，比如可見或隱藏。
8、animation-play-state：控制動(dòng)畫是否正在運(yùn)行或暫停，常見的值有running（運(yùn)行）和paused（暫停）。
此外，在使用animation屬性時(shí)，至少需要指定兩個(gè)屬性：動(dòng)畫的名稱和動(dòng)畫的持續(xù)時(shí)間。其他屬性可以根據(jù)需要選擇性地設(shè)置，以達(dá)到預(yù)期的動(dòng)畫效果。
示例
/* 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;總結(jié)來說，CSS的animation屬性提供了一種在不使用JavaScript的情況下，通過純CSS實(shí)現(xiàn)網(wǎng)頁元素動(dòng)畫的方式。它能夠使元素從一種樣式平滑過渡到另一種樣式，增強(qiáng)用戶的視覺體驗(yàn)。
通過這篇文章，我們了解了CSS動(dòng)畫中的過渡屬性和動(dòng)畫屬性的基本概念和應(yīng)用。它們可以幫助我們創(chuàng)建出各種吸引人的動(dòng)畫效果，讓我們的網(wǎng)頁更加生動(dòng)有趣。
記住，好的動(dòng)畫效果應(yīng)該是恰到好處的，過多的動(dòng)畫可能會(huì)讓用戶感到困擾。所以，讓我們一起用好這兩個(gè)屬性，創(chuàng)造出更好的用戶體驗(yàn)吧！
我們下期再見！
END
文案編輯|云端學(xué)長
文案配圖|云端學(xué)長
內(nèi)容由：云端源想分享
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來
以前說頁面是動(dòng)態(tài)，基本都是說數(shù)據(jù)是從數(shù)據(jù)庫查詢的，不是寫死在html代碼里面的。現(xiàn)在的說頁面動(dòng)態(tài)，一般會(huì)問：你是說數(shù)據(jù)，還是效果動(dòng)態(tài)？
CSS3 Grid布局實(shí)現(xiàn)Loading動(dòng)畫效果
好的前端動(dòng)畫效果，能給用戶帶來非常舒適的體驗(yàn)效果，更甚者，有用戶覺的你這個(gè)動(dòng)畫效果非常nice，反復(fù)操作，就為看你這個(gè)動(dòng)畫。停留時(shí)間，預(yù)覽量上了，帶來的收益也不是一丁點(diǎn)吧。
當(dāng)然也不用為了動(dòng)畫，而額外的來制作動(dòng)畫效果。比如一個(gè)彈框，可以直接漸變出現(xiàn)的，你還加了飛了一圈出現(xiàn)，那就是不必要的動(dòng)畫了。
所以恰大好處的動(dòng)畫效果，能帶來非常不錯(cuò)的效果。
下面我們來學(xué)習(xí)如果只做一些簡單的動(dòng)畫效果：
CSS3 Grid布局實(shí)現(xiàn)Loading動(dòng)畫效果
CSS3 Grid布局實(shí)現(xiàn)Loading動(dòng)畫效果
上圖的動(dòng)畫，就是一個(gè)簡單的loading加載效果，而且是一個(gè)3x3的九宮格。是因?yàn)樾D(zhuǎn)才變成一個(gè)菱形的樣子。我們先來畫出3x3的九宮格：
html
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
這里用9個(gè)span來做每個(gè)格子元素。
css
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 每個(gè)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;
}
CSS3 Grid布局實(shí)現(xiàn)Loading動(dòng)畫效果
grid-template-columns: 該屬性是基于 網(wǎng)格列. 的維度，去定義網(wǎng)格線的名稱和網(wǎng)格軌道的尺寸大小。
repeat: 表示網(wǎng)格軌道的重復(fù)部分，以一種更簡潔的方式去表示大量而且重復(fù)列的表達(dá)式。
有了九宮格布局后，我們直接旋轉(zhuǎn)這個(gè)loading元素，制作動(dòng)畫。
.loading {
...
transform: rotate(45deg); /*旋轉(zhuǎn)45°*/
}
.loading span {
background-color: var(--color);
/**
* 動(dòng)畫名字是blinking
* 動(dòng)畫整個(gè)時(shí)間是2s
* 每個(gè)元素的執(zhí)行延時(shí)時(shí)間 var(--delay)
* 動(dòng)畫的速度曲線 由慢到快 ease-in-out
* 永久執(zhí)行 infinite
*/
animation: blinking 2s var(--delay) ease-in-out infinite;
animation-fill-mode: backwards;
}
/**
* 每個(gè)元素執(zhí)行動(dòng)畫延時(shí)時(shí)間變量
*/
.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;
}
/**
* 動(dòng)畫效果
*/
@keyframes blinking {
0%, 20% {
transform: rotate(0deg) scale(0);
}
40%, 80% {
/*
* 旋轉(zhuǎn)一圈rotate(1turn)[轉(zhuǎn)、圈（Turns）。一個(gè)圓共1圈]
* 縮放 scale 如果大于1就代表放大；如果小于1就代表縮小
*/
transform: rotate(1turn) scale(1);
}
100% {
transform: rotate(2turn) scale(0);
}
}
animation語法
animation: name duration timing-function delay iteration-count direction;
1、animation-name 規(guī)定需要綁定到選擇器的 keyframe 名稱。
2、animation-duration 規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
3、animation-timing-function 規(guī)定動(dòng)畫的速度曲線。
4、animation-delay 規(guī)定在動(dòng)畫開始之前的延遲。
5、animation-iteration-count 規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
6、animation-direction 規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。
CSS3 Grid布局實(shí)現(xiàn)Loading動(dòng)畫效果
動(dòng)畫的速度曲線
1、linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）。(勻速)
2、ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相對于勻速，中間快，兩頭慢）。
3、ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）（相對于勻速，開始的時(shí)候慢，之后快）。
4、ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）（相對于勻速，開始時(shí)快，結(jié)束時(shí)候間慢，）。
5、ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相對于勻速，（開始和結(jié)束都慢）兩頭慢）。
6、cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。
CSS3 Grid布局實(shí)現(xiàn)Loading動(dòng)畫效果
CSS3動(dòng)畫基礎(chǔ)知識可以看看 《如何快速上手基礎(chǔ)的CSS3動(dòng)畫》 這篇文章，里面用更小的示例，講述了CSS3動(dòng)畫的每個(gè)屬性。CSS3動(dòng)畫，無外乎就是animation、transform、transition等屬性的使用，記住他們每個(gè)的作用特效就可以了。
喜歡小編或者覺得小編文章對你有幫助的，可以點(diǎn)擊一波關(guān)注哦！
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
