CSS3新增添了實現(xiàn)動畫效果的新功能，通過本文，你可以對這些新功能有個初步了解。本文將為大家?guī)硪恍┏錆M創(chuàng)意的菜單懸停效果。它由圖標(biāo)，主標(biāo)題，副標(biāo)題等簡單的元素構(gòu)成，通過CSS3最新的過渡（transition）和動畫（animation）兩個功能實現(xiàn)鼠標(biāo)懸停時的動畫效果。我們用同樣的元素做出了9種不同的效果。

演示 下載

示例中所用的圖標(biāo)實際上是一種網(wǎng)絡(luò)符號字體，包含在@font-face。這種字體是有Just Be Nice工作室所開發(fā)。

標(biāo)記

菜單的HTML架構(gòu)是一個無序列表，其中的每個選項都是由圖標(biāo)跨度和內(nèi)容層組成的鏈接元素。內(nèi)容層包含主標(biāo)題和副標(biāo)題：

因為我們使用符號字體作為圖標(biāo)，我們?yōu)閳D標(biāo)寫上字母。

CSS

所有示例中的共有的樣式都包含符號字體：

文件的路徑是相對于CSS文件而言的，因此，它們應(yīng)放在css目錄下的websymbols中（css/websymbols/）。

用圖標(biāo)作為字體的好處在于，可以為它運(yùn)用漂亮的效果，比如說，文本投影（text shadow）。還可以根據(jù)需求按比例放大或縮小。

每個示例中的無序列表樣式都相同。我們只是讓它的寬度適合，方便其居于屏幕中央：

在下面的示例中，會向大家展示元素的樣式是如何為最終效果服務(wù)的。

在第1個示例中，我們會研究所有元素的樣式，其它示例，我們側(cè)重對代碼進(jìn)行改寫。

注意：以下示例中，我不會寫任何瀏覽器特定的前綴，但是你會在示例文件夾中看到所有必要前綴。

示例1

在示例1的堆疊菜單中，可實現(xiàn)各個元素的大小，以及各個菜單項的背景顏色的改變。

為列表項定義樣式：

過渡效果適合所有屬性，因為鼠標(biāo)移上時，邊框顏色和背景色都會發(fā)生相應(yīng)的變化。

鏈接元素樣式見下：

為單個元素定義樣式。

圖標(biāo)位于左邊，它的跨度樣式見下：

如你所見，我們使用了網(wǎng)絡(luò)符號做字體。每個字母都是一個圖標(biāo)。

內(nèi)容元素的封裝見下面的樣式：

在代碼中修改內(nèi)容元素的字體值，為transition添加linear屬性實現(xiàn)勻速過渡效果：

現(xiàn)在，我們進(jìn)行最有趣的部分，當(dāng)鼠標(biāo)懸停在列表元素上時，我們會看到字體大小和顏色的變化：

由于我們?yōu)槊恳粋€元素定義了過渡效果，切換時就會看到動畫效果。

示例2

在示例2中，我們讓內(nèi)容元素分別從上和下兩個方向?qū)崿F(xiàn)的動畫效果。

首先定義兩種動畫效果。第一種將各個元素沿著Y軸下移200%（即translateY的值為200%）。另外，它的不透明度設(shè)為0（即opacity 的值設(shè)為0）。鼠標(biāo)移開時，即回到原始效果，在下面代碼所示的”to“后面將 translateY的值設(shè)為0%即可。

第二種動畫效果實現(xiàn)元素從上到下滑入，遵循同樣的規(guī)則，只是相應(yīng)的數(shù)要進(jìn)行修改：

示例3

在示例3中，當(dāng)鼠標(biāo)懸停時，會看到背景和文本顏色發(fā)生改變，并同時伴有圖標(biāo)旋轉(zhuǎn)和放大效果。通過改變transform屬性和修改圖標(biāo)的字體大小的值，即可實現(xiàn)以上效果：

示例4

示例4到示例8都采用了不同布局的菜單。各個菜單項相鄰排列，呈浮動狀。

圖標(biāo)的位置在菜單項的中上位置：

內(nèi)容封裝放在菜單項較底部位置：

主標(biāo)題和副標(biāo)題的樣式設(shè)置見下：

鼠標(biāo)懸停時，我們實現(xiàn)圖標(biāo)模糊，并從上向下滑入，同時背景顏色改變，文本內(nèi)容從上、下分別滑入的效果。

把圖標(biāo)的顏色設(shè)為透明（transparent），并按照下圖為文本投影（text-shadow）屬性賦值（產(chǎn)生模糊），這樣圖標(biāo)的模糊效果也就產(chǎn)生了。此處的動畫效果與前面幾個示例相同，只不過實現(xiàn)從上到下的動畫效果的translate值不同罷了。這里的 translateY的值設(shè)為-300%。

示例5

在本示例中，我們可實現(xiàn)：圖標(biāo)自左向右，第一排文字自右向左，第二排文字自下向上同時滑動出現(xiàn)。

從下往上（moveFromBottom）的動畫效果前面已經(jīng)提過。接下來看看從左向右（moveFromLeft）的動畫效果，通過將translateX的值設(shè)為-100%，實現(xiàn)各個元素從左向右的移動效果；translateX的值設(shè)為0%則表示，當(dāng)鼠標(biāo)離開時，就回到原始效果。

將translateX的值設(shè)為100%即可實現(xiàn)從右向左（moveFromRight ）的動畫效果。

示例6

本示例實現(xiàn)的效果：主標(biāo)題從左滑入，同時伴有旋轉(zhuǎn)效果：

該效果（moveFromLeftRotate）的實現(xiàn)代碼：

示例7

在本示例中，我們將副標(biāo)題放置在最底部。

我們希望副標(biāo)題從下往上滑入，同時改變背景色的動畫效果。

圖標(biāo)從下往上滑入，同時，主標(biāo)題則由小變大。

由小變大（ smallToBig ）的動畫效果展示了如何使用CSS3的變換處理（transform）中的scale屬性。

示例8

本示例要實現(xiàn)鼠標(biāo)懸停時，列表項所有內(nèi)容都放大的效果。

菜單中的心形圖標(biāo)還有一個特殊的切換效果。當(dāng)鼠標(biāo)懸停時，通過運(yùn)用由小變大和不斷循環(huán)交替的特殊方式來實現(xiàn)可愛的心跳動畫效果。

示例9

示例9和示例10都是環(huán)形的菜單結(jié)構(gòu)，所以我們會對列表中的元素更換樣式。

為了創(chuàng)建環(huán)形，我們要把圓角的值改為元素的外寬度/高度的一半。 將所有元素全部放在列表項中，并居中。下面我們實現(xiàn)鼠標(biāo)懸停時的效果。

本例所實現(xiàn)的效果：菜單項旋轉(zhuǎn)360°，主標(biāo)題消失，副標(biāo)題出現(xiàn)（不透明度開始的值為0）。

示例10

最后一個例子中，每個菜單項的左外邊距都是48像素，且相互重疊。當(dāng)鼠標(biāo)移上去時，環(huán)形菜單項整體變大，菜單的堆疊順序也上移（z-index是決定元素的堆疊順序）。最終就呈現(xiàn)出菜單項上浮的效果。

我希望大家能從這些小實驗上找到靈感和創(chuàng)意。

請注意，所有這些動畫和過渡效果都只能在諸如Google Chrome，蘋果的Safari，Mozilla Firefox等現(xiàn)代瀏覽器中生效。

當(dāng)前名稱：用CSS3打造獨(dú)具創(chuàng)意的動畫菜單效果
分享鏈接：http://m.rwnh.cn/news2/214402.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、外貿(mào)建站、ChatGPT、網(wǎng)頁設(shè)計公司、微信小程序、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)