c3 新特性

　　　　　　　　漸變

線性漸變

.line {

    height: 100px;

    /*線性漸變語法*/

    background-image: linear-gradient(

to right,/* 漸變的方向 ： to + 方位名稱(left| right| top| bottom) */

red , /* 設置漸變的開始顏色 */

/* 可以設置多個顏色 顏色之間用逗號隔開 */

blue /* 設置漸變的結束顏色 */

    );

}

 

徑向漸變

background-image: radial-gradient(

/*100px代表半徑

center 代表圓心點位置*/

100px at center,

red,

blue

);

重復徑向漸變

background: repeating-radial-gradient(red, yellow 10%, green 15%);

 

animation IE10

animation的六大屬性

animation-name規定需要綁定選擇器的keyframe名稱

animation-duration規定完成動畫所花費的時間 單位：s ms

object.style.animationDuration="3s"

animation-timing-function動畫的速度曲線

默認值ease

object.style.animationTimingFunction="linear"

語法 animation-timing-function:value

animation-timing-function使用名為三次Cubic Bezier貝塞爾曲線函數的數學函數，來生成速度曲線 可以使用自己的值也可

以預定義的值

值:linear從始到末以相同的速度

ease 默認 從低速 加快在結束前變慢

ease-in動畫低速開始

ease-out動畫低速結束

ease-in-out動畫從低速開始和結束

cubic-bezier(n,n,n,n)在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值

animation-deplay動畫開始之前的延遲

animation-delay: 單位：s ms;

JavaScript 語法：object.style.animationDelay="2s"

animation-delay 值以秒或毫秒計。

允許負值，-2s 使動畫馬上開始，但跳過 2 秒進入動畫

 

animation-iteration-count動畫播放的次數 IE10

animation-iteration-count: n|infinite

JavaScript 語法： object.style.animationIterationCount=3

 

animation-direction是否應該輪流反向播放動畫

animation-direction 值是 "alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等

）向后播放

animation-direction: normal|alternate;

JavaScript 語法： object.style.animationDirection="alternate"

默認值 none 0 ease 0 1 normal

javascript的語法 object.style.animation="mymove 5s infinite"

Transition 過渡的四大屬性 IE10

transition-property

transiont-property屬性規定過渡css屬性的名稱

transition-property: none|all|propertyCSS 屬性名稱列表，列表以逗號分隔;

JavaScript 語法： object.style.transitionProperty="width,height"

transition-duration 完成過渡效果需要多少秒或毫秒

transition-duration: time;

JavaScript 語法： object.style.transitionDuration="5s"

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n);

JavaScript 語法： object.style.transitionTimingFunction="linear"

transition-delay

JavaScript 語法： object.style.transitionDelay="2s"

transition-delay: time;

默認值 all 0 ease 0

transition:property duration timing-function delay

javascript語法：object.style.transition="width 2s"

 

 

transform IE10

transform 允許我們對元素進行旋轉、縮放、移動、或傾斜

默認none

javascript的語法 object.style.transform="rotate(7deg)"

transform: none|transform-functions;

none 不進行轉換

matrix(n,n,n,n,n,n)使用六個值的矩陣

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)使用 16 個值的 4x4 矩陣

translate(x,y)2D 轉換

translate3d(x,y,z)3D 轉換

translateX(x)只是用 X 軸的值

translateY(y)只是用Y軸的值

translateZ(z)只是用Z軸的值

scale(x,y)2D縮放

scale3d(x,y,z)3D縮放

scaleX(x),scaleY(y),scaleZ(z)

rotate(angle) 2D 旋轉，在參數中規定角度

rotate3d(x,y,z,angle)3D 旋轉

rotateX(angle),rotateY(angle),rotateZ(angle)

skew(x-angle,y-angle) 定義沿着 X 和 Y 軸的 2D 傾斜轉換

skewX(angle) skewY(angle) perspective(n)

偽類選擇器   

　　　　　　　　　　　 　Odd 和 even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞

類名:nth-last-child(n) 　　選擇器匹配屬於其元素的第 N 個子元素的每個元素，不論元素的類型，從最后一個子元素開始計數。

類名:nth-of-type(n)  　　  選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素.

類名:nth-last-of-type(n)    選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素，從最后一個子元素開始計數。

類名:last-child  　　　　  指定屬於其父元素的最后一個子元素的 

類名:first-child　　　　　指定屬於其父元素的第一個子元素的 

 

類名:first-of-type

類名:only-child

類名:only-of-type

類名:empty

類名:checked

類名:enabled

類名:disabled

類名::selection

類名:not(s)

類名::not(.s)

body: nth-child(even), nth-child(odd)/*：此處他們分別代表了表格（tbody）下面的偶數行和奇數行（tr）*/等等......

     

選擇器	例子	例子描述
*	*	選擇所有元素。
#id	#firstname	選擇 id="firstname" 的所有元素。
.class	.intro	選擇 class="intro" 的所有元素。
element	p	選擇所有 <p> 元素。
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。
element element	div p	選擇 <div> 元素內部的所有 <p> 元素。
element>element	div>p	選擇父元素為 <div> 元素的所有 <p> 元素。
element+element	div+p	選擇緊接在 <div> 元素之后的所有 <p> 元素。
[attribute]	[target]	選擇帶有 target 屬性所有元素。
[attribute=value]	[target=_blank]	選擇 target="_blank" 的所有元素。
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 "flower" 的所有元素。
[attribute|=value]	[lang|=en]	選擇 lang 屬性值以 "en" 開頭的所有元素。
:link	a:link	選擇所有未被訪問的鏈接。
:visited	a:visited	選擇所有已被訪問的鏈接。
:active	a:active	選擇活動鏈接。
:hover	a:hover	選擇鼠標指針位於其上的鏈接。
:focus	input:focus	選擇獲得焦點的 input 元素。
:first-letter	p:first-letter	選擇每個 <p> 元素的首字母。
:first-line	p:first-line	選擇每個 <p> 元素的首行。
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每個 <p> 元素。
:before	p:before	在每個 <p> 元素的內容之前插入內容。
:after	p:after	在每個 <p> 元素的內容之后插入內容。
:lang(language)	p:lang(it)	選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。
element1~element2	p~ul	選擇前面有 <p> 元素的每個 <ul> 元素。
[attribute^=value]	a[src^="https"]	選擇其 src 屬性值以 "https" 開頭的每個 <a> 元素。
[attribute$=value]	a[src$=".pdf"]	選擇其 src 屬性以 ".pdf" 結尾的所有 <a> 元素。
[attribute*=value]	a[src*="abc"]	選擇其 src 屬性中包含 "abc" 子串的每個 <a> 元素。
:first-of-type	p:first-of-type	選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
:last-of-type	p:last-of-type	選擇屬於其父元素的最后 <p> 元素的每個 <p> 元素。
:only-of-type	p:only-of-type	選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
:only-child	p:only-child	選擇屬於其父元素的唯一子元素的每個 <p> 元素。
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，從最后一個子元素開始計數。
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最后一個子元素開始計數。
:last-child	p:last-child	選擇屬於其父元素最后一個子元素每個 <p> 元素。
:root	:root	選擇文檔的根元素。
:empty	p:empty	選擇沒有子元素的每個 <p> 元素（包括文本節點）。
:target	#news:target	選擇當前活動的 #news 元素。
:enabled	input:enabled	選擇每個啟用的 <input> 元素。
:disabled	input:disabled	選擇每個禁用的 <input> 元素
:checked	input:checked	選擇每個被選中的 <input> 元素。
:not(selector)	:not(p)	選擇非 <p> 元素的每個元素。
::selection	::selection	選擇被用戶選取的元素部分。