卡卡網(wǎng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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