CSS3中漸變效果

2021-09-14 04:21:15 字數 1167 閱讀 7519

1.線性漸變

a)從左到右漸變

div:nth-child(1)

b)不指定方向預設是從上到下

div:nth-child(2)

c)按照指定角度

div:nth-child(3)

d)斑馬線漸變

2.頸項漸變

radial-gradient(輻射半徑,中心的位置,起始顏色,終止顏色);

中心點位置:at left right center bottom top

3.漸變應用球體

4.漸變過程體驗

a)transition:width(屬性) 2s(時間)

如果多個屬性特徵都是一樣的,可以簡寫all

設定變化的速度用linear

5.漸變過程屬性

b)transition-property:width;改變屬性

c)transition-duration:4s;運動時間

d)transition-timing-function:ease(減速)

e)ease-in加速 ease-out減速 ease-in-out先加速後減速

f)過渡延遲:transition-delay

.box

.box:hover

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 設定漸變效果

值 說明to top 從下到上漸變 to bottom 從上到下漸變 to left 從右到左漸變 to right 從左到右漸變 to top left 從右下方到左上方漸變 to top right 從左下方到右上方漸變 to bottom left 從右上方到左下方漸變 to bottom r...