css3中的新特性是什么

這篇文章給大家分享的是有關(guān)css3中的新特性是什么的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序定制開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了金壇免費(fèi)建站歡迎大家使用！

css的基本語(yǔ)法是什么

css的基本語(yǔ)法是：1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個(gè)屬性和一個(gè)值組成；4、屬性和屬性值被冒號(hào)分隔開(kāi)。

css3新特性有：1、“E[att^=value]”、“E[att$=value]”等屬性選擇器；2、“:root”、“:not”、“:empty”等偽類；3、box-shadow、transition、transform等屬性。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3選擇器

屬性選擇器

  • E[att^=value]

  • E[att$=value]

  • E[att*=value]

偽類選擇器

  • :root

  • :not

  • :only-child

  • :first-child和：last-child

  • :nth-child(n)和：nth-last-child(n)

  • :nth-of-type(n) 和:nth-last-of-type(n)

  • :target

  • :empty

css3屬性

CSS3邊框與圓角

  • CSS3圓角 border-radius

  • 盒陰影 box-shadow

  • 邊框圖像 border-image

CSS3背景與漸變

CSS3背景

  • background-image：設(shè)置一個(gè)元素的背景圖像。

  • background-origin：規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位。

  • background-clip：規(guī)定背景的繪制區(qū)域。

CSS3漸變

定義：可以在兩個(gè)或者多個(gè)指定顏色之間顯示平移的過(guò)渡

  • linear-gradient()：線性漸變。

  • radial-gradient()：徑向漸變。

CSS3過(guò)渡

定義：允許css的屬性值在一定時(shí)間區(qū)間內(nèi)平滑的過(guò)渡，在鼠標(biāo)點(diǎn)擊，鼠標(biāo)滑過(guò)或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫(huà)形式改變css的屬性值。

  • transition：設(shè)置元素當(dāng)過(guò)渡效果，四個(gè)簡(jiǎn)寫(xiě)屬性為：

  • transition-property：過(guò)渡屬性名。

  • transition-duration：規(guī)定完成過(guò)渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。

  • transition-timing-function：指定切換效果的速度。

css3中的新特性是什么

  • cubic-bezier(x1,y1,x2,y2)：貝塞爾曲線，是控制變化的速度曲線。

  • transition-delay：指定何時(shí)將開(kāi)始切換效果。

CSS3變換

定義：讓一個(gè)元素在一個(gè)坐標(biāo)系統(tǒng)中變形，這個(gè)屬性包含一系列的變形函數(shù)，可以移動(dòng)，旋轉(zhuǎn)，縮放元素。

  • transform：應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。

語(yǔ)法：

transform: none（默認(rèn))|transform-functions;

  • transform-origin：允許您更改轉(zhuǎn)換元素的位置。2D轉(zhuǎn)換元素可以改變?cè)氐腦和Y軸。 3D轉(zhuǎn)換元素，還可以更改元素的Z軸。

語(yǔ)法：

transform-origin: x-axis y-axis z-axis;

  • transform-style：指定嵌套元素是怎樣在三維空間中呈現(xiàn)。

2D轉(zhuǎn)換方法

  • rotate(angle)：定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。

  • translate(x,y)：指定元素在二維空間中的位移。X軸方向向右，Y軸方向向下。

  • translateX(n)：指定元素在X軸中的位移。

  • translateY(n)：指定元素在Y軸中的位移。

  • scale(n)：定義 2D 縮放轉(zhuǎn)換。

  • scaleX(n)：定義 X 軸方向的縮放轉(zhuǎn)換。

  • scaleY(n)：定義 Y 軸方向的縮放轉(zhuǎn)換。

  • matrix(a,b,c,d,e,f)：定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。

  • skew(x-angle,y-angle)：定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。

  • skewX(angle)：定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。

  • skewY(angle)：定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。

3D轉(zhuǎn)換方法

  • perspective(n)：為 3D 轉(zhuǎn)換元素定義透視視圖。

  • translate3d(x,y,z)：指定元素在三維空間中的位移。X軸方向向右，Y軸方向向下，Z軸方向向你。

  • translateX(x)：指定元素在X軸中的位移。

  • translateY(y)：指定元素在Y軸中的位移。

  • translateZ(z)：指定元素在Z軸中的位移。

  • scale3d(x,y,z)：定義 3D 縮放轉(zhuǎn)換。

  • scaleX(x)：通過(guò)設(shè)置 X 軸的值來(lái)定義縮放轉(zhuǎn)換。

  • scaleY(y)：通過(guò)設(shè)置 Y 軸的值來(lái)定義縮放轉(zhuǎn)換。

  • scaleZ(z)：通過(guò)設(shè)置 Z 軸的值來(lái)定義縮放轉(zhuǎn)換。

  • rotate3d(x,y,z,angle)：定義 3D 旋轉(zhuǎn)。

  • rotateX(x)：定義沿著 X 軸的 3D 旋轉(zhuǎn)。

  • rotateY(y)：定義沿著 Y 軸的 3D 旋轉(zhuǎn)。

  • rotateZ(z)：定義沿著 Z 軸的 3D 旋轉(zhuǎn)。

  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。

CSS3動(dòng)畫(huà)

定義：使元素從一種樣式逐漸變化到另外一種樣式的效果。

  • animation：為元素添加動(dòng)畫(huà)，是一個(gè)簡(jiǎn)寫(xiě)屬性。

  • animation-name：為 @keyframes 動(dòng)畫(huà)名稱。

  • animation-duration：動(dòng)畫(huà)指定需要多少秒或毫秒完成。

  • animation-timing-function：設(shè)置動(dòng)畫(huà)將如何完成一個(gè)周期。

  • animation-delay：設(shè)置動(dòng)畫(huà)在啟動(dòng)前的延遲間隔，可以是秒或毫秒。

  • animation-iteration-count：定義動(dòng)畫(huà)的播放次數(shù)。

css3中的新特性是什么

  • animation-direction：指定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。

css3中的新特性是什么

  • animation-fill-mode：規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。默認(rèn)情況下，CSS 動(dòng)畫(huà)在第一個(gè)關(guān)鍵幀播放完之前不會(huì)影響元素，在最后一個(gè)關(guān)鍵幀完成后停止影響元素。該屬性可重寫(xiě)該行為。

css3中的新特性是什么

  • animation-play-state：指定動(dòng)畫(huà)是否正在運(yùn)行或已暫停。

css3中的新特性是什么

  • @Keyframes規(guī)則：使用@keyframes規(guī)則，你可以創(chuàng)建動(dòng)畫(huà)。

語(yǔ)法：

@keyframes animationname {keyframes-selector {css-styles;}}

css3中的新特性是什么

@keyframes mymove {

0%   {top:0px; left:0px; background:red;}
	25%  {top:0px; left:100px; background:blue;}
	50%  {top:100px; left:100px; background:yellow;}
	75%  {top:100px; left:0px; background:green;}
	100% {top:0px; left:0px; background:red;}
}

感謝各位的閱讀！關(guān)于“css3中的新特性是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)名稱：css3中的新特性是什么
文章來(lái)源：http://bm7419.com/article20/gejsjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)

廣告

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

成都做網(wǎng)站