CSS3漸變及2D轉(zhuǎn)換

持續(xù)更新哦…

1、css3漸變

概念:

CSS3漸變(gradient)可以讓你在兩個或多個指定的顏色之間顯示平
穩(wěn)的過渡。以前，你必須使用圖像來實現(xiàn)這些效果，現(xiàn)在通過使用
CSS3的漸變(gradients)即可實現(xiàn)。此外，漸變效果的元素在放大時
看起來效果更好，因為漸變(gradient)是由瀏覽器生成的。

css3漸變:在兩個或多個顏色之間的平穩(wěn)過渡
漸變屬性是:background-image:
			background:
線性漸變:由一個顏色到另一個顏色的平穩(wěn)過渡
	linear-gradient(方位,顏色1,顏色2)
	方位:left right top bottom deg(角度可以為負數(shù))
	to left top(表示去左上進行漸變)
	repeating-linear-gradient()重復(fù)漸變
徑向漸變:	顏色由一個點向四周擴散的效果
	background:radial-gradient(起始坐標,漸變形狀,漸變大小,顏色1,顏色2)
	起始坐標:left right top bottom center,默認是中間
	漸變形狀:ellipse橢圓,如果元素是正方形,也將顯示正圓
	circle正圓
	漸變大小:
		closest-side:最近邊
		farthest-side:最遠邊
		closest-corner:最近角
		fathest-corner:最遠角

2、過渡（重點）

過渡:可以讓css屬性值在一定事件區(qū)間內(nèi)平滑的過渡效果
transition:過渡屬性 時間 延遲時間 動畫類型
	過渡屬性:all 所有屬性
		具體屬性
		transition-property:過渡屬性；
        transition-duration:過渡時間；
        transition-delay:延遲時間；
        transition-timing-function:過渡動畫類型；

	時間,延遲時間單位為:s
	動畫類型:
		linear:勻速運動
		ease:逐漸慢下來
		ease-in:加速
		ease-out 減速
		ease-in-out 先加速后減速
		貝塞爾曲線
		steps(數(shù)字) 逐幀動畫

3、2D平面效果（重點）

transform:變化屬性

? 功能函數(shù):

? 位移:

? translateX()

? translateY()

? translate(x,y)

可以為負數(shù)

縮放:

scaleX()
scaleY()
scale(xy)
scale(x,y)
注意:
1 默認大小
0 縮小到消失
0~1 縮小
大于1 放大
負數(shù)則反向
  /* 縮放 */
            transform: scale(2);
            transform: scaleX(1.5);
            transform: scaleY(2.5);
            transform: scale(2.5,2.5);

旋轉(zhuǎn):

rotateX()
rotateY()
rotate(z)
  /* 旋轉(zhuǎn) z軸 */
            transform: rotate(90deg);
            /* 高度變小 */
            transform: rotateX(70deg);
            /* 寬度變小 */
            transform: rotateY(70deg);

問題:先旋轉(zhuǎn),后位移和先位移,后旋轉(zhuǎn),效果一樣嗎?

不一樣,因為先旋轉(zhuǎn)改變了位移的方向

transform: translate(100px) rotate(40deg);

? transform: rotate(40deg) translate(100px);

傾斜

skewX()
skewY()
skew(x)
skew(x,y)
  /* 傾斜x軸 */
            transform: skew(20deg);
            /* x,y */
            transform: skew(20deg,40deg);
            transform: skewX(30deg);
            transform: skewY(30deg);

變形原點

該屬性只有在設(shè)置了transform屬性的時候起作用

? transform-origin: center bottom;所有方位名詞都可以,數(shù)值,百分比也可以文章來源地址http://www.zghlxwxcb.cn/news/detail-672359.html

到了這里，關(guān)于CSS3漸變及2D轉(zhuǎn)換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！