?

移動web開發(fā)

第一天內(nèi)容分為三大塊：字體標(biāo)簽iconfont,

? ? ? ? ? ? ? ? ? ? 平面轉(zhuǎn)換

? ? ? ? ? ? ? ? ? ? 漸變background-image:linear-gradient

?

字體圖標(biāo)：

字體圖標(biāo)iconfont(必須在html里加入一個標(biāo)簽)

一般使用行內(nèi)標(biāo)簽span,b,u,i,s

需要在阿里巴巴圖標(biāo)iconfont下載進(jìn)行使用（官方免費(fèi)）

加入購物車-添加到項(xiàng)目-本地下載-解壓-把包放到css文件夾里

使用link進(jìn)行導(dǎo)入

需要給一個標(biāo)簽，給類iconfont 字體圖標(biāo)名稱（打開下載包里面的html，fontclass下查看名稱）

相對于精靈圖sprite來說有以下優(yōu)點(diǎn)：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 靈活性強(qiáng)：字號，字體，圖標(biāo)的顏色可以通過iconfont選擇器進(jìn)行更改，

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 輕量化：由于是字體標(biāo)簽，體積較小，服務(wù)器訪問的壓力大大的降低，瀏覽器執(zhí)行速度快

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兼容性強(qiáng)：幾乎兼容所有主流的瀏覽器

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 但是只能是簡單的圖片，顏色單一的可以使用字體圖標(biāo)，否則使用精靈圖

字體標(biāo)簽導(dǎo)入：前提是跟設(shè)計(jì)師進(jìn)行溝通，獲取到后綴名為svg的圖片進(jìn)行去色后上傳，然后在進(jìn)行下載使用

?

平面轉(zhuǎn)換：

transform 具有層疊性，如果出現(xiàn)多個transform一般用復(fù)合屬性，rotate至于最后

位移：

? ? ? ? x,y可使用像素px

? ? ? ? ?x和y左上為負(fù)數(shù)，右下為正數(shù)

? ? ? ? transform-translate(x,y)

? ? ? ? 百分比%（按寬高比例）

? ? ? ? 單獨(dú)取水平或者垂直的則

? ? ? ? transform-translateX（水平方向取值）

? ? ? ? transform-translateY（垂直方向取值）

? ? ? ? 一般平面轉(zhuǎn)換位移配合Hover和過渡使用

?

旋轉(zhuǎn)：

? ? transform-rotate

? ? 屬性是deg

? ? 一般平面轉(zhuǎn)換位移配合Hover和過渡使用

? ? 用于復(fù)合屬性一般至于最后，因?yàn)樾D(zhuǎn)會讓x,y發(fā)生改變

?

位移： transform-scale(1)表示1倍

? ? transform-scale(1.2)表示1.2倍

? ? 一般平面轉(zhuǎn)換位移配合Hover和過渡使用

?

? ? 總結(jié)：一般位移transform-translate ?

? ? ? ? ? ? 旋轉(zhuǎn)： ? ? ? ? ?rotate ?

? ? ? ? ? ? 縮放 ? ? ? ? ? ?scale

? ? ? ? ? ? 三者至于hover內(nèi)

? ? ? ? ? ? 而過渡transtion all time至于標(biāo)簽內(nèi)

? ? 一般平面轉(zhuǎn)換位移配合Hover和過渡使用

?

復(fù)合屬性的使用順序: transform translate() scale() rotate()

?

企業(yè)開發(fā)中常用于:hover

漸變色：background-image:lineargrdient(

? ? transparent,

? ? rgba(0,0,0,(0-1))

)

? ? ?opacity 0;

? ? transtion all time;

?

總結(jié)

以上是生活随笔為你收集整理的移动web开发，day1,字体标签、平面位移、渐变总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。