移动web开发01

字体图标

目的：使用字体图标技巧实现网页中简洁的图标效果。
在使用前首先要下载字体包：

• 登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

使用字体图标：
Unicode编码：

类名：

注意：在使用类名时前面的点不用复制上去。

Unicode编码，代码如下：

    <style>
        span {
            font-family: 'iconfont';
        }
    </style>

<span>&#xe6f8</span>

类名，代码如下：
先要引用下载好的字体包

<link rel="stylesheet" href="iconfont.css文件的路径">

    <style>
        .iconfont {
            font-size: 60px;
        }
    </style>

<i class="iconfont icon-favorites-fill"></i>

注意：i 标签内的 iconfont 是必须要写上的，后面空格跟上复制下来的图标类名。

平面转换

目标：实现元素的位移、旋转、缩放等效果。
平面转换的属性：transform

1. 位移
transform: translate(水平移动距离, 垂直移动距离);

    <style>
        .father {
            width: 500px;height: 300px;margin: 100% auto;border: 1px solid #000;
        }
        .son {
            width: 200px;height: 100px;background-color: pink;transition: all 0.5s;
        }
        .father:hover .son {
            transform: translate(100px,50px);
            /* 百分比：盒子自身移动的百分比 */
            transform: translate(100%,50px);
            transform: translate(-100px,50px);
            /* 只给出一个值表示x移动距离 */
            transform: translate(100px);
        }
    </style>

位移-绝对定位居中

    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 方法一 */
            /* margin-top: -50px;
            margin-left: -100px; */

            /* 方法二 */
            transform: translate(-50%,-50%);

            width: 200px;
            height: 100px;
            background-color: pink;
        }

    </style>

2. 旋转
transform: rotate(角度)
角度的单位是deg
取值为正时，顺时针旋转；取值为负时，逆时针旋转。

    <style>
        img {
            width: 250px;
            transition: all 2s;
        }
        img:hover {
            /* 顺时针 */
            transform: rotate(360deg);
            /* 逆时针 */
            transform: rotate(-360deg);
        }
    </style>

多重旋转
使用transform复合属性实现

 transform: translate(600px) rotate(360deg);

3. 缩放
transform: scale(缩放倍数);

    <style>
        .box {
            width: 300px;height: 210px;margin: 100px auto;background-color: black;
        }
        .box img {
            width: 100%;
            transition: all .5s;
        }
        .box:hover img {
            /* width: 150%; */
            transform: scale(0.8);
        }
    </style>

渐变

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景。
使用background-image属性实现

    <style>
        .box {
            width: 300px;
            height: 200px;
            background-image: linear-gradient(
                transparent,rgba(0,0,0, .4)
            );
        }
    </style>

小编开始写不久，如有错误可在评论区留言及时更正哦~
欢迎大家留言！！！