移动Web网页开发（一）

1. 字体图标

1.1 介绍

字体图标本质是什么？

字体图标本质是字体

最常用的字体图标库是什么？

阿里字体图标网站（Iconfont）：www.iconfont.cn/
IcoMoon：icomoon.io

1.2 使用步骤

第一步：下载

百度搜索”阿里字体图标”
登录
搜索图标
选择图标并加入购物车
购物车
添加至项目
下载至本地
解压
将所有文件拷贝到项目根目录下
将文件夹名称改为iconfont

第二步：使用（用浏览器打开demo_index.html 说明书）

2. 平面转换（2D转换）

2.1 简介

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

缩放：scale
移动：translate
旋转：rotate
倾斜：skew

2.2 二维坐标系

2.3 2D 转换之移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。 语法：
transform: translateX(x);
transform: translateY(y);
transform: translate(x, y); 总结：
定义 2D 转换，沿着 X 和 Y 轴移动元素
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

子盒子在父盒子中垂直居中，使用绝对定位的步骤是？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位移-基本使用</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 100px auto;
            border: 2px solid rgb(29, 191, 255);
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 1s;
        }

        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 1. px */
            /* transform: translate(100px, 200px); */

            /* 2. 百分比: 参照盒子自身的尺寸计算 */
            /* transform: translate(50%, 50%); */

            /* 3. 负数：移动方向水平是向左侧，垂直是向上 */
            /* transform: translate(-50%, -50%); */

            /* 4. 技巧：只改变某个方向的位置 */
            /* translate只给出一个值表示水平方向 */
            /* transform: translate(100px); */

            transform: translate(-50%,-50%);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

效果图：

2.4 双开门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3. 双开门案例</title>
    <style>
        .box {
            margin: 50px auto;
            width: 1366px;
            height: 600px;
            border: 2px solid springgreen;
            background: url(./images/bg.jpg);
            overflow: hidden;
            transition: all 0.5s;
        }
        .left {
            float: left;
            width: 50%;
            height: 100%;
            background: url(./images/fm.jpg)no-repeat;
            transition: all 1s;
        }
        .right {
            float: right;
            width: 50%;
            height: 100%;
            background: url(./images/fm.jpg)no-repeat -683px;
            transition: all 1s;
        }
        .box:hover .left {
            transform: translateX(-100%);
        }
        .box:hover .right {
            transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

利用伪元素实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3. 双开门案例</title>
    <style>
        .box {
            margin: 50px auto;
            width: 1366px;
            height: 600px;
            border: 2px solid springgreen;
            background: url(./images/bg.jpg);
            overflow: hidden;
            transition: all 0.5s;
        }
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background: url(./images/fm.jpg);
            transition: all 1s;
        }
        .box:after {
            background-position: right;
        }
        .box:hover:after {
            transform: translateX(100%);
            filter: blur(5px);
        }
        .box:hover:before {
            transform: translateX(-100%);
            filter: blur(5px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

效果图：

2.4 2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

旋转的属性名和值为？

语法: transform: rotate(角度);

设置旋转的角度单位是？

// 单位：deg

可以改变旋转所围绕的中心点吗？怎么设置？

改变旋转中心点 语法： transform-origin: (x,y);

取值分类：

• 关键词（x值：left、right、center；y值：top、bottom、 center ） • 像素值 • 百分数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转效果</title>
    <style>
        .box {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: rgb(0, 255, 13);
            transition: all 2s;
            text-align: center;
            line-height: 200px;
            /* 改变旋转中心点位置 */
            /* transform-origin: center bottom;
            transform-origin: 100% 50%; */
        }

        .box:hover {
            /* 正数：顺时针 */
            transform: rotate(60deg);
            /* 负数：逆时针 */
            /* transform: rotate(-60deg); */
        }
    </style>
</head>

<body>
    <div class="box">旋转</div>
</body>

</html>

效果图：

案例：三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5. 案例：三角形</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2824245_y1uygrbt.css">
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 50px;
            border: 2px solid red;
            margin: 100px auto;
        }
        .iconfont {
            position: absolute;
            top: 50%;
            right: 10px;
            font-size: 20px;
            margin-top: -10px;
        }
        .iconfont:hover {
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <i class="iconfont icon-arrow-right"></i>
    </div>
</body>
</html>

效果图：

2.5 2D 转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

缩放的属性名和值为？

语法

transform: scaleX(值);
transform: scaleY(值);
transform: scale(值1, 值2);

scale()括号里的值代表什么意思？

取值

纯数字，不能为负数
值代表缩放倍数，所以值大于1表示放大，小于1表示缩小

缩放默认是基准点是什么？

语法：transform-origin: (x,y);

能不能改变缩放的基准点？怎么设置？

关键词（x值：left、right、center；y值：top、bottom、 center ） • 像素值 • 百分数

总结

transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转效果</title>
    <style>
        .box {
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: purple;
            transition: all 2s;

            /* 改变缩放基准线或基准点 */
            /* transform-origin: left; */
            /* transform-origin: top right; */
        }

        .box:hover {
            /* 非中心点放大 */
            /* width: 150%; */


            /* 放大 */
            transform: scale(2);
            /* 缩小 */
            /* transform: scale(0.5); */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

多重转换

语法：transform: translate() rotate() scale();

l 注意

Ø 旋转会改变轴的方向，如果先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果，所以translate()

rotate() 顺序不能随意换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8. 多重转换</title>
    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 2px solid red;
            margin: 100px auto;
            
        }
        .box img {
            width: 200px;
            height: 200px;
            border: 25px solid black;
            box-sizing: border-box;
            border-radius: 50%;
            transition: all 5s;
            box-shadow: 5px 5px 15px black;
        }
        .box:hover img {
            transform: translate(600px) rotate(360deg) scale(0.7); 
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <div class="wheel">车轮</div> -->
        <img src="./images/tyre1.png" alt="">
    </div>
</body>
</html>

效果图：

3. 渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。
此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

3.1 CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。
颜色节点即你想要呈现平稳过渡的颜色。
同时，你也可以设置一个起点和一个方向（或一个角度）。 语法:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

属性	谷歌	IE	火狐	欧朋
background-image	1.0	4.0	1.0	1.0	3.5

注意： IE8 及更早版本的 IE 浏览器不支持该属性。

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9. 线性渐变 - 从上到下（默认情况下)</title>
    <style>
        #grad {
            width: 500px;
            height: 200px;
            background-image: linear-gradient(#e66465, #9198e5);
        }
    </style>
</head>

<body>
    <div id="grad"></div>
</body>

</html>

效果图：

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.线性渐变 - 从左到右</title>
    <style>
        #grad {
            width: 500px;
            height: 200px;
            background-image: linear-gradient(to right,red,yellow);
        }
    </style>
</head>
<body>
    <div id="grad"></div>
</body>
</html>

效果图：

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黑色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11. 线性渐变 - 对角</title>
    <style>
        #grad {
            width: 500px;
            height: 200px;
            background-image: linear-gradient(to bottom right,red,rgb(0, 0, 0));
        }
    </style>
</head>
<body>
    <div id="grad"></div>
</body>
</html>

效果图：

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法：

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。
换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器（Chrome、Safari、firefox等）的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12.使用角度</title>
    <style>
        #grad {
            width: 500px;
            height: 200px;
            background-image: linear-gradient(-120deg, red, yellow);
        }
    </style>
</head>

<body>
    <div id="grad"></div>
</body>

</html>

效果图：

使用多个颜色节点

下面的实例演示了如何设置多个颜色节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用多个颜色节点</title>
    <style>
 #grad {
            width: 500px;
            height: 200px;
            background-image: linear-gradient(red, yellow, green,blue);
        }
    </style>
</head>
<body>
    <div id="grad"></div>
</body>
</html>

效果图：

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba()

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

#grad { /* 标准的语法 */ background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }

3.2 CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

Radial gradient

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

颜色节点均匀分布的径向渐变：

#grad {
    background-image: radial-gradient(red, yellow, green);
}

径向渐变 - 颜色节点不均匀分布

#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); }

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

形状为圆形的径向渐变：

    #grad { 
        background-image: radial-gradient(circle, red, yellow, green);
    }

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side
farthest-side
closest-corner
farthest-corner

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

#grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); }

移动Web网页开发资料（字体图标,平面转换（2D转换）,渐变）

移动Web网页开发（一）

1. 字体图标

1.1 介绍

字体图标本质是什么？

最常用的字体图标库是什么？

1.2 使用步骤

第一步：下载

第二步：使用（用浏览器打开demo_index.html 说明书）

2. 平面转换（2D转换）

2.1 简介

2.2 二维坐标系

2.3 2D 转换之移动 translate

子盒子在父盒子中垂直居中，使用绝对定位的步骤是？

利用伪元素实现效果：

2.4 2D 转换之旋转 rotate

旋转的属性名和值为？

设置旋转的角度单位是？

可以改变旋转所围绕的中心点吗？怎么设置？

取值分类：

案例：三角形

2.5 2D 转换之缩放scale

缩放的属性名和值为？

scale()括号里的值代表什么意思？

缩放默认是基准点是什么？

能不能改变缩放的基准点？怎么设置？

总结

多重转换

3. 渐变

3.1 CSS3 线性渐变

浏览器支持

线性渐变 - 从上到下（默认情况下）

线性渐变 - 从左到右

线性渐变 - 对角

使用角度

使用多个颜色节点

使用透明度（transparent）

重复的线性渐变

3.2 CSS3 径向渐变

设置形状

不同尺寸大小关键字的使用

重复的径向渐变

永远都不要放弃自己,勇往直前,直至成功!