移动web

字体图标

一，字体图标基本使用

1.设置字体图标公共类名 .iconfont { font-size: 100px; color: gold; }

2.点开www.iconfont.cn/ 选择想要的字体图标的类名，添加到标签的class上

例如： <i class="iconfont icon-icon-"></i>

二，在线引入字体图标

链接引入字体图标路径

例如： <link rel="stylesheet" href="http://at.alicdn.com/t/font_3079017_a43cdfzvilp.css"> （需要在前面加上【https:】）

2.引入多色图标

需要使用script标签引入一个js文件

例如： <script src="http://at.alicdn.com/t/font_2892564_cqjh5kphu9.js"></script> <style type="text/css">

平面转换

一，位移的基本使用

在X轴向右移动100px transform: translate(100px, 0);
在Y轴向下移动100px transform: translate(0, 100px);
在Y轴向上移动100px transform: translate(0, -100px);
同时在x轴和y轴移动向右移动100px 向下移动100px transform: translate(100px, 100px);
设置百分比数值: 盒子自身尺寸的百分向右移动自身一半的距离 transform: translate(50%);

6.行内元素设置转换无效必须转换成块级元素或者行内块元素 span transform
二，绝对定位元素居中

1.利用2d平移的百分比数值，参考自身计算的特点实现向左向上走自身一半的效果

    .dad {
        position: relative;
        width: 500px;
        height: 500px;
        margin: 100px auto;
        border: 4px solid #6cf;
    }

    .son {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 200px;
        height: 200px;
        background-color: tomato;
    }

三，旋转效果

2d旋转正值顺时针旋转负值逆时针旋转 transform: rotate(deg);

例如：顺时针旋转360度 transform: rotate(360deg);

四，转换原点

设置方位名词 left right center top bottom
如果只写一个值，另一个值默认为center
具体像素

例如：（向左100px，向上100px） transform-origin:-100px -100px;

五，多重转换效果

边向右走600px 边旋转一周 transform: translate(600px) rotate(360deg);

渐变

背景渐变的本质是背景图片
background-image: linear-gradient (方向,颜色,颜色)

例如：设置背景渐变水平向右从#ff9 渐变至 #0a0 后面可添加多个颜色值

background-image: linear-gradient(to right, #ff9, #0a0);

字体图标平面转换渐变

移动web

字体图标

平面转换

渐变