CSS 3 漸變效果的實現

2022-09-15 07:09:11 字數 1019 閱讀 8976

本文將通過css 3來展示乙個鏈結的漸變效果,當滑鼠停留在鏈結上面背景顏色會改變。在這之前這種效果只能通過flash或者j**ascript完成,現在只需要幾行css**就可輕鬆做到

完成後的效果

首先來建立簡單的超連結,如下

接下來,為正常鏈結狀態下,新增顏色(顏色淺一點,淺綠色的)

a.foo

隨後新增變換後的綠色背景

a.foo:hover

接下來,新增漸變,由於此特性並不是所有瀏覽器都支援的,所以要在屬性前加字首以示區別。

a.foo

ps: -webkit-transition-property: background;   對背景顏色進行漸變

-webkit-transition-duration: 1.3s; 漸變持續時間,即從一種顏色過度到另一種顏色的時間

-webkit-transition-timing-function: ease;   漸變使用的函式

其中timing-function有六個可選值,用於控制轉換效果,分別是ease,linear, ease-in, ease-out, ease-in-out, and cubic-bezier

新增延時效果

-webkit-transition-delay: 0.5s;

這裡要區別 -webkit-transition-duration: 1.3s;這個屬性(從a色變到b色的時間)。而-webkit-transition-delay: 0.5s;是開始變換的延時時間(滑鼠停留上去延時0.5秒再變換和滑鼠離開後,延時0.5再返回正常狀態的顏色)

可以把時間值加大之後,再看執行效果

a.foo

使用縮寫形式

a.foo

帶有延時效果的縮寫形式:

-webkit-transition: background 0.3s ease 1.5s;

多瀏覽器支援:

a.foo

CSS3漸變效果

css3提供了linear gradient屬性實現背景顏色的漸變功能。在以前,這種效果必須採用才能實現的。方位可選引數,漸變的方位。可以使用的值有 to top to top right to right to bottom to bottom left to left to top left。起...

CSS3漸變效果

一.線性漸變linear gradient 1.使用方法 background webkit linear gradient red,blue background moz linear gradient red,blue background linear gradient red,blue 2....

CSS3中漸變效果

1.線性漸變 a 從左到右漸變 div nth child 1 b 不指定方向預設是從上到下 div nth child 2 c 按照指定角度 div nth child 3 d 斑馬線漸變 2.頸項漸變 radial gradient 輻射半徑,中心的位置,起始顏色,終止顏色 中心點位置 at l...