移动web开发，day1,字体标签、平面位移、渐变总结

 

移动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;