這篇文章給大家分享的是有關(guān)css3中的新特性是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了金壇免費(fèi)建站歡迎大家使用！
css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個(gè)屬性和一個(gè)值組成；4、屬性和屬性值被冒號分隔開。
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 屬性相對于什么位置來定位。
background-clip：規(guī)定背景的繪制區(qū)域。
CSS3漸變
定義：可以在兩個(gè)或者多個(gè)指定顏色之間顯示平移的過渡
linear-gradient()：線性漸變。
radial-gradient()：徑向漸變。
CSS3過渡
定義：允許css的屬性值在一定時(shí)間區(qū)間內(nèi)平滑的過渡，在鼠標(biāo)點(diǎn)擊，鼠標(biāo)滑過或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫形式改變css的屬性值。
transition：設(shè)置元素當(dāng)過渡效果，四個(gè)簡寫屬性為：
transition-property：過渡屬性名。
transition-duration：規(guī)定完成過渡效果需要花費(fèi)的時(shí)間（以秒或毫秒計(jì)）。
transition-timing-function：指定切換效果的速度。
cubic-bezier(x1,y1,x2,y2)：貝塞爾曲線，是控制變化的速度曲線。
transition-delay：指定何時(shí)將開始切換效果。
CSS3變換
定義：讓一個(gè)元素在一個(gè)坐標(biāo)系統(tǒng)中變形，這個(gè)屬性包含一系列的變形函數(shù)，可以移動，旋轉(zhuǎn)，縮放元素。
transform：應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。
語法：
transform: none（默認(rèn))|transform-functions;
transform-origin：允許您更改轉(zhuǎn)換元素的位置。2D轉(zhuǎn)換元素可以改變元素的X和Y軸。 3D轉(zhuǎn)換元素，還可以更改元素的Z軸。
語法：
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)：通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。
scaleY(y)：通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
scaleZ(z)：通過設(shè)置 Z 軸的值來定義縮放轉(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動畫
定義：使元素從一種樣式逐漸變化到另外一種樣式的效果。
animation：為元素添加動畫，是一個(gè)簡寫屬性。
animation-name：為 @keyframes 動畫名稱。
animation-duration：動畫指定需要多少秒或毫秒完成。
animation-timing-function：設(shè)置動畫將如何完成一個(gè)周期。
animation-delay：設(shè)置動畫在啟動前的延遲間隔，可以是秒或毫秒。
animation-iteration-count：定義動畫的播放次數(shù)。
animation-direction：指定是否應(yīng)該輪流反向播放動畫。
animation-fill-mode：規(guī)定當(dāng)動畫不播放時(shí)（當(dāng)動畫完成時(shí)，或當(dāng)動畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式。默認(rèn)情況下，CSS 動畫在第一個(gè)關(guān)鍵幀播放完之前不會影響元素，在最后一個(gè)關(guān)鍵幀完成后停止影響元素。該屬性可重寫該行為。
animation-play-state：指定動畫是否正在運(yùn)行或已暫停。
@Keyframes規(guī)則：使用@keyframes規(guī)則，你可以創(chuàng)建動畫。
語法：
重慶分公司
重慶分公司
@keyframes animationname {keyframes-selector {css-styles;}}
@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)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
