用CSS3打造獨(dú)具創(chuàng)意的動(dòng)畫菜單效果

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

演示 下載

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

標(biāo)記

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

因?yàn)槲覀兪褂梅栕煮w作為圖標(biāo)，我們?yōu)閳D標(biāo)寫上字母。

CSS

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

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

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

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

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

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

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

示例1

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

為列表項(xiàng)定義樣式：

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

鏈接元素樣式見下：

為單個(gè)元素定義樣式。

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

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

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

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

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

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

示例2

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

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

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

示例3

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

示例4

示例4到示例8都采用了不同布局的菜單。各個(gè)菜單項(xiàng)相鄰排列，呈浮動(dòng)狀。

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

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

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

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

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

示例5

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

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

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

示例6

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

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

示例7

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

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

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

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

示例8

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

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

示例9

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

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

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

示例10

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

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

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

網(wǎng)站欄目：用CSS3打造獨(dú)具創(chuàng)意的動(dòng)畫菜單效果
網(wǎng)站路徑：http://www.muchs.cn/news/214402.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、企業(yè)建站、外貿(mào)建站、軟件開發(fā)、面包屑導(dǎo)航

廣告

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