?

移動web開發

第一天內容分為三大塊：字體標簽iconfont,

? ? ? ? ? ? ? ? ? ? 平面轉換

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

?

字體圖標：

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

一般使用行內標簽span,b,u,i,s

需要在阿里巴巴圖標iconfont下載進行使用（官方免費）

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

使用link進行導入

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

相對于精靈圖sprite來說有以下優點：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 靈活性強：字號，字體，圖標的顏色可以通過iconfont選擇器進行更改，

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 輕量化：由于是字體標簽，體積較小，服務器訪問的壓力大大的降低，瀏覽器執行速度快

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兼容性強：幾乎兼容所有主流的瀏覽器

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

字體標簽導入：前提是跟設計師進行溝通，獲取到后綴名為svg的圖片進行去色后上傳，然后在進行下載使用

?

平面轉換：

transform 具有層疊性，如果出現多個transform一般用復合屬性，rotate至于最后

位移：

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

? ? ? ? ?x和y左上為負數，右下為正數

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

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

? ? ? ? 單獨取水平或者垂直的則

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

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

? ? ? ? 一般平面轉換位移配合Hover和過渡使用

?

旋轉：

? ? transform-rotate

? ? 屬性是deg

? ? 一般平面轉換位移配合Hover和過渡使用

? ? 用于復合屬性一般至于最后，因為旋轉會讓x,y發生改變

?

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

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

? ? 一般平面轉換位移配合Hover和過渡使用

?

? ? 總結：一般位移transform-translate ?

? ? ? ? ? ? 旋轉： ? ? ? ? ?rotate ?

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

? ? ? ? ? ? 三者至于hover內

? ? ? ? ? ? 而過渡transtion all time至于標簽內

? ? 一般平面轉換位移配合Hover和過渡使用

?

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

?

企業開發中常用于:hover

漸變色：background-image:lineargrdient(

? ? transparent,

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

)

? ? ?opacity 0;

? ? transtion all time;

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。