站群服務(wù)器建站中CSS3的漸變以及2D轉(zhuǎn)換
1. CSS3漸變
CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)。由于不同的渲染引擎實(shí)現(xiàn)漸變的語法不同
1.1 線性漸變
語法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：默認(rèn)為to bottom，即從上向下的漸變；
stop：顏色的分布位置，默認(rèn)均勻分布，例如有3個(gè)顏色，各個(gè)顏色的stop均為33.33%。
角度 英文 作用
0deg to top 從下到上
90deg to right 從左到右
180deg to bottom 從上到下
270deg to left 從右到左
to top left 有下角到左上角
totopright 左下角到右上角
1.2 徑向漸變
語法：
background: radial-gradient(center, shape, size, start-color, ..., last-color);
注意：
center：漸變起點(diǎn)的位置，可以為百分比，默認(rèn)是圖形的正中心。
shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認(rèn)為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。
size：漸變的大小，即漸變到哪里停止，它有四個(gè)值。
closest-side：最近邊； farthest-side：最遠(yuǎn)邊；closest-corner：最近角； farthest-corner：最遠(yuǎn)角。
1.3 重復(fù)線性漸變
repeating-linear-gradient() 函數(shù)用于重復(fù)線性漸變
語法：
background: repeating-linear-gradient(red, yellow 10%, green 20%);
注意： 10%的位置為yellow，20%的位置為green，然后按照這20%向下重復(fù)
1.4 重復(fù)徑向漸變
repeating-radial-gradient() 函數(shù)用于重復(fù)線性漸變
語法：
background: repeating-radial-gradient(red, yellow 10%, green 20%);
2. 站群服務(wù)器使用CSS3的2D轉(zhuǎn)換
2.1 transform
rotate(): 旋轉(zhuǎn)函數(shù)（取值度數(shù)）
Transform-origin:旋轉(zhuǎn)的基點(diǎn)
skew(): 傾斜函數(shù)（取值度數(shù) (扭曲)）
skewX() skewY()
scale() :縮放函數(shù) （取值 正數(shù)、負(fù)數(shù)和小數(shù)）
scaleX()scaleY()
translate() :位移函數(shù)
translateX()translateY()
2.2 rotate() 方法
單位：deg
通過 rotate() 方法，元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。
例：值 rotate(30deg) 就是把元素順時(shí)針旋轉(zhuǎn) 30 度
2.3 skew() 方法
通過 skew() 方法，元素翻轉(zhuǎn)（傾斜/扭曲）給定的角度，根據(jù)給定的水平線（X 軸）和垂直線（Y 軸）參數(shù)
例：值 skew(30deg,20deg) 就是圍繞 X 軸把元素翻轉(zhuǎn)（傾斜/扭曲） 30 度，圍繞 Y 軸翻轉(zhuǎn)（傾斜/扭曲） 20 度。
2.4 scale() 方法
通過 scale() 方法，元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)
例：值 scale(2,4) 就是把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高度的 4 倍。
2.5 translate() 方法
通過 translate() 方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)
例：值 translate(50px,100px) 把元素從左側(cè)移動(dòng) 50 像素，從頂端移動(dòng) 100 像素。
3. CSS3過渡
① 通過 CSS3，我們可以在不使用 Flash 動(dòng)畫或 JavaScript 的情況下，
當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 屬性。
Safari 需要前綴 -webkit-。
注：Internet Explorer 9 以及更早的版本，不支持 transition 屬性；Chrome 25 以及更早的版本，需要前綴 -webkit-。
3.1 transition
transition-property 要運(yùn)動(dòng)的樣式 （all || [attr] || none）
transition-duration 運(yùn)動(dòng)時(shí)間
transition-delay 延遲時(shí)間
transition-timing-function 運(yùn)動(dòng)形式
ease：（逐漸變慢）默認(rèn)值
linear：（勻速）
ease-in：(加速)
ease-out：（減速）
ease-in-out：（先加速后減速）
3.2 pointer-events
pointer-events直譯為指針事件
pointer-events：auto/none
阻止用戶的點(diǎn)擊動(dòng)作產(chǎn)生任何效果
阻止缺省鼠標(biāo)指針的顯示
阻止CSS里的hover和active狀態(tài)的變化觸發(fā)事件
阻止JavaScript點(diǎn)擊動(dòng)作觸發(fā)的事件
3.3 backface-visibility
backface-visibility屬性定義當(dāng)元素不面向屏幕時(shí)是否可見

backface-visibility: visible|hidden;
// visible 背面是可見的
// hidden 背面是不可見的
————————————————

縱橫數(shù)據(jù)新上的美國(guó)站群服務(wù)器8C 現(xiàn)貨
限量特價(jià) 速定! cn2限量一人3臺(tái)
E5 16G 1T 8C 232IP  
E5*2 32G 1T 8C 232IP
E5*2 32G 2T 8C 232IP  
E5*2 32G 3T 8C 232IP
美國(guó)站群服務(wù)器 美國(guó)高防御服務(wù)器 歡迎在線客服  QQ 4001886560  482986990