css3有哪些新特性-前端問答-PHP中文網

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

本教學操作環境：windows7系統、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：設定一個元素的背景圖片。
background-origin：規定 background-position 屬性相對於什麼位置來定位。
background-clip：規定背景的繪製區域。

CSS3漸層

定義：可以在兩個或多個指定顏色之間顯示平移的過渡

linear-gradient()：線性漸層。
radial-gradient()：徑向漸層。

CSS3過渡

#定義：允許css的屬性值在一定時間區間內平滑的過渡，在滑鼠點擊，滑鼠滑過或對元素任何改變中觸發，並圓滑地以動畫形式改變css的屬性值。

transition：設定元素當過渡效果，四個簡寫屬性為：
transition-property：過渡屬性名。
transition-duration：規定完成過渡效果所需花費的時間（以秒數或毫秒計）。
transition-timing-function：指定切換效果的速度。

css3有哪些新特性

cubic-bezier(x1,y1,x2,y2)：貝塞爾曲線，是控制變化的速度曲線。
transition-delay：指定何時將開始切換效果。

CSS3變換

#定義：讓一個元素在一個座標系統中變形，這個屬性包含一系列的變形函數，可以移動，旋轉，縮放元素。

transform：套用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。

語法：

transform: none（默认)|transform-functions;

登入後複製

transform-origin：允許您更改轉換元素的位置。 2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。

語法：

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

登入後複製

transform-style：指定巢狀元素是如何在三維空間中呈現。

2D轉換方法

rotate(angle)：定義 2D 旋轉，在參數中規定角度。
translate(x,y)：指定元素在二維空間中的位移。 X軸方向向右，Y軸方向向下。
translateX(n)：指定元素在X軸中的位移。
translateY(n)：指定元素在Y軸中的位移。
scale(n)：定義 2D 縮放轉換。
scaleX(n)：定義 X 軸方向的縮放轉換。
scaleY(n)：定義 Y 軸方向的縮放轉換。
matrix(a,b,c,d,e,f)：定義 2D 轉換，使用六個值的矩陣。
skew(x-angle,y-angle)：定義沿著 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)：定義沿著 X 軸的 2D 傾斜轉換。
skewY(angle)：定義沿著 Y 軸的 2D 傾斜轉換。

3D轉換方法

perspective(n)：為 3D 轉換元素定義透視視圖。
translate3d(x,y,z)：指定元素在三維空間中的位移。 X軸方向向右，Y軸方向向下，Z軸方向向你。
translateX(x)：指定元素在X軸中的位移。
translateY(y)：指定元素在Y軸中的位移。
translateZ(z)：指定元素在Z轴中的位移。
scale3d(x,y,z)：定义 3D 缩放转换。
scaleX(x)：通过设置 X 轴的值来定义缩放转换。
scaleY(y)：通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)：通过设置 Z 轴的值来定义缩放转换。
rotate3d(x,y,z,angle)：定义 3D 旋转。
rotateX(x)：定义沿着 X 轴的 3D 旋转。
rotateY(y)：定义沿着 Y 轴的 3D 旋转。
rotateZ(z)：定义沿着 Z 轴的 3D 旋转。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵。

CSS3动画

定义：使元素从一种样式逐渐变化到另外一种样式的效果。

animation：为元素添加动画，是一个简写属性。
animation-name：为 @keyframes 动画名称。
animation-duration：动画指定需要多少秒或毫秒完成。
animation-timing-function：设置动画将如何完成一个周期。
animation-delay：设置动画在启动前的延迟间隔，可以是秒或毫秒。
animation-iteration-count：定义动画的播放次数。

css3有哪些新特性

animation-direction：指定是否应该轮流反向播放动画。

css3有哪些新特性

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。该属性可重写该行为。

css3有哪些新特性

animation-play-state：指定动画是否正在运行或已暂停。

css3有哪些新特性

@Keyframes规则：使用@keyframes规则，你可以创建动画。

语法：

@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;}
}

登入後複製

推荐学习：css视频教程

以上是css3有哪些新特性的詳細內容。更多資訊請關注PHP中文網其他相關文章！