卡卡網(wǎng)

本文介紹CSS3如何使用背景圖片來填充文字，讓文字變得更酷。

CSS3 animation 動畫屬性 animation-direction 是一個動畫方向的屬性，該屬性有4個值：normal | reverse | alternate | alternate-reverse，它們的運(yùn)動方向是不同的，本文著重介紹它們的區(qū)別。

CSS3 animation屬性animation-timing-function定義了動畫的播放速度曲線。該屬性值有6個可選，它們各不相同，只要表現(xiàn)在運(yùn)動速度(曲線)方面的差異。

CSS3 animation動畫屬性有個animation-fill-mode屬性值，比較常用的有forwards和backwards。這些值有什么不同呢，今天本文將用一個實例一圖解釋。

本文介紹一個純CSS3實現(xiàn)的loading加載動畫，是一個圓形滾動的效果。

CSS3 animation 有6個動畫屬性，本文將學(xué)習(xí)了解animation動畫屬性的固有寫法，了解其各屬性的具體含義。

CSS3 animation動畫屬性值linear、 ease、 ease-in、 ease-out、 ease-in-out，這5個屬性值都是規(guī)定動畫的速度曲線，速度曲線用于使變化更為平滑。

CSS3動畫屬性transform，在上一文中，我們學(xué)習(xí)了《transform: scale() 縮放轉(zhuǎn)換》，本文將通過一個實例來分析如何使用其他的動畫屬性。

CSS3中有個transform: scale()的屬性，這是一個縮放轉(zhuǎn)換屬性。本文將介紹transform: scale()一個簡單的縮放實例。

本文將介紹如何使用CSS3實現(xiàn)段落第一個文字放大。在放大文字的同時，還能為它添加一些樣式，把它的背景設(shè)為圓形、圓角、正方形等形狀。

 本文介紹如何用圖片填充文字顏色，文字顏色用圖片來填充，即是所說的文字鏤空效果。

本文將要介紹的是一款具有伸縮過渡效果的二級導(dǎo)航菜單，該菜單使用純CSS實現(xiàn)，代碼較少，修改容易，如果你喜歡此菜單的效果，那么可以直接下載本實例修改使用。

移動菜單一般都有一個開關(guān)按鈕，可以點擊按鈕打開或關(guān)閉菜單，本文將介紹一個CSS實現(xiàn)的Menu Toggle移動菜單切換按鈕(打開/關(guān)閉)。

本文介紹CSS3空格號和“>” 大于號的區(qū)別，一圖清晰顯示它們之間的用法區(qū)別。

CSS3 “+” 加號選擇器 和“~” 波浪號選擇器具有差不多的作用，但又有些區(qū)別，下面一圖便清晰顯示了CSS3 “+” 加號 “~” 波浪號的區(qū)別。

大部分時間線都只有日期，今天介紹一款具有日期和具體鐘點時間的時間線/時間軸。當(dāng)點擊日期時，還可以折疊該日時間線。

本文介紹一個伸縮式的左側(cè)二級導(dǎo)航菜單設(shè)計。默認(rèn)顯示一級菜單，點擊菜單時顯示其子菜單。本菜單使用了CSS+Javascript來實現(xiàn)。

本文介紹4款純CSS實現(xiàn)的3D按鈕點擊過渡效果，HTML4款3D按鈕實例不同的過渡效果完全由不同的CSS來實現(xiàn)。

前面曾介紹過512個CSS圖標(biāo)形狀(icon shape)，今天再推薦一下，用純CSS偽元素創(chuàng)建的84個小圖標(biāo)。

本文介紹一個有趣的p或div樣式，其左邊框有一個感嘆號警告提示符，整個設(shè)計是純CSS實現(xiàn)，并且代碼簡單易懂。

本文介紹一款常見實用的移動網(wǎng)頁(二級)菜單設(shè)計，個人覺得使用起來非常順暢。

本文介紹一款CSS表單設(shè)計樣式，主要是輸入框的設(shè)計，當(dāng)鼠標(biāo)點擊輸入框時，輸入框就放大凸顯。

本文介紹一款加載動畫，是個旋轉(zhuǎn)的圓環(huán)，這個圓環(huán)動畫跟以前介紹過的旋轉(zhuǎn)圓環(huán)動畫不同之處在于，這個圓環(huán)在轉(zhuǎn)動過程中，是會更換顏色的，每轉(zhuǎn)一圈，就更換一個顏色。

索引目錄列表十分常見，本文介紹一個純CSS實現(xiàn)的索引目錄列表樣式。

有關(guān)文字的效果，前面介紹過很多，例如文字剪紙效果，文字投影效果，文字描邊效果，文字浮雕效果，文字漸變等，本文要介紹的是5款文字動畫(跳動、浮動、轉(zhuǎn)動、翻轉(zhuǎn)、碰撞等)效果。

本文介紹一個卡片鼠標(biāo)懸停效果，當(dāng)鼠標(biāo)移到圖片上時，描述文字從下到上滾動在圖片上。本實例是純CSS實現(xiàn)，方便遷移使用。

進(jìn)程跟蹤步驟好處多多，例如訂單進(jìn)度跟蹤，可以清晰的向用戶顯示當(dāng)前訂單的完成進(jìn)度情況，本文給大家介紹一款進(jìn)程跟蹤步驟的樣式。

前面介紹過幾款css timeline時間線，本文介紹的CSS timeline時間線與前面的不同之處是，可為任何節(jié)點設(shè)計一個動畫樣式，以凸顯該節(jié)點的標(biāo)題和內(nèi)容。

CSS loading 加載動畫用于程序加載過程中的顯示，它的作用是告訴用戶程序還在進(jìn)行中，不要關(guān)閉窗口。本文介紹用純CSS來實現(xiàn)一個loading加載動畫。

本文給大家介紹一款按鈕的鼠標(biāo)懸停效果，是純CSS實現(xiàn)的，鼠標(biāo)移上按鈕后，按鈕背景顏色隨之變化。這個效果使用非常廣泛，非常多的網(wǎng)頁都用上了這個效果。

傳統(tǒng)的灰色純色邊框你是不是覺得太難看了？本文將介紹如何用純CSS就能實現(xiàn)具有漸變和圓角的彩色邊框。

本文給大家介紹6款精美漂亮的CSS Tabs選項卡，它們有著漂亮的樣式，讓人看著舒服的過渡效果，值得推薦收藏使用。

本文給大家介紹10款純CSS實現(xiàn)的tabs選項卡，它們均無用到第三方插件，也沒需要用到j(luò)query庫文件，因此遷移非常方便，把代碼拷貝過去就能用，值得推薦使用。

前面介紹過漂亮的CSS動畫進(jìn)度條，本文更進(jìn)一步，介紹帶有文本表示（百分比）的CSS動畫進(jìn)度條，這樣的進(jìn)度條用戶體驗會更佳。

本文介紹3個漂亮的CSS動畫進(jìn)度條，它們都是用純CSS來實現(xiàn)的，但進(jìn)度條樣式設(shè)計得很漂亮，值得推薦使用。

這是一個帶有 8 個加載圖像的 SVG 動畫實例，這個例子非常適合用作加載(loading)動畫。 實例介紹這幾個加載動畫都是使用 HTML + CSS + SVG 實現(xiàn)的。

本文介紹一個播放器進(jìn)度條，它具有可拖動的手柄。

今天要介紹的是矩形（動畫）進(jìn)度條，有11個實例。值得一提的是，今天介紹的矩形進(jìn)度條，絕大部分是純CSS實現(xiàn)的。

前面介紹過圓形/徑向進(jìn)度條和步驟進(jìn)度條，今天將介紹7款另一形式的進(jìn)度條——圓角進(jìn)度條。這些進(jìn)度條多用于表示加載進(jìn)程。

步驟進(jìn)度條能清晰的給用戶顯示整個操作流程的每一個過程階段，因此在項目進(jìn)度條設(shè)計中，常常用到步驟進(jìn)度條。本文將介紹4款步驟進(jìn)度條的實例。

進(jìn)度條通常包括進(jìn)度的數(shù)字（百分比）和動畫表示，這提高了進(jìn)度條的清晰度，增加了用戶體驗，本文介紹4款圓形/徑向進(jìn)度條。

今天給大家介紹8款CSS動畫背景(飛揚(yáng)文字/旋轉(zhuǎn)方塊/粒子動畫/旋轉(zhuǎn)的正方形。。。)。這些動畫背景使用CSS3實現(xiàn)，通過使用CSS3 transition 和 animation 等屬性，動畫開發(fā)變得不再困難。

使用 CSS 來創(chuàng)建時尚的動畫和視覺效果，你不需要了解 JavaScript 甚至 HTML，本文將給大家介紹5款CSS動畫背景。

本文介紹一個流星雨效果的動畫背景，它是純CSS實現(xiàn)的，無需用到JavaScript，也無需用到第三方插件，喜歡的朋友可以直接復(fù)制代碼使用，非常方便。

此動畫為你的背景添加了深度錯覺，從而創(chuàng)建了視差滾動星星效果。它使用一個簡單的 SASS 函數(shù)（在每次加載時創(chuàng)建一個隨機(jī)星域）和 CSS 動畫關(guān)鍵幀。

這是一個粒子動畫，不需要 JavaScript 來構(gòu)建它。這個背景的整個想法是讓粒子隨機(jī)移動。

本文介紹的CSS動畫背景是——對角線顏色漸變。實例簡介使用零 JS 創(chuàng)建此 CSS 動畫背景示例。

本文介紹10款純CSS實現(xiàn)的彈窗（模態(tài)彈窗 - modal popup)，它們均無使用jQuery或Javascript，代碼復(fù)制過去就能用，程序遷移非常方便。

彈出窗口在網(wǎng)頁設(shè)計中十分常用，本文介紹4款模態(tài)彈窗(modal popup)，這幾款彈窗都是響應(yīng)式的。

導(dǎo)航欄菜單不應(yīng)該做得呆板生硬，加上下橫線平滑過渡效果讓菜單在交互中變得更加有趣生動。本文介紹3款有下橫線平滑過渡效果的導(dǎo)航欄菜單。