移动Web 第一天
字体图标
字体图标的优点：
Ø 灵活性：灵活地修改样式，例如：尺寸、颜色等
Ø 轻量级：体积小、渲染快、降低服务器请求次数
Ø 兼容性：几乎兼容所有主流浏览器
Ø 使用方便 下载字体包 使用字体图标
使用字体图标 - Unicode编码：
l 引入样式表：iconfont.css
l 复制粘贴图标对应的Unicode编码
l 设置文字字体
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
i {
font-family: iconfont;
font-style: normal;
font-size: 50px;
color: yellow;
}
</style>
</head>
<body>
<!-- 2.通过i标签把unicode编码复制过来 -->
<i></i>
用字体图标 – 类名：
l 引入字体图标样式表
调用图标对应的类名，必须调用2个类名
l iconfont类：基本样式，包含字体的使用等
l icon-xxx：图标对应的类名 字体图标-Iconfont
<link rel="stylesheet" href="./iconfont/iconfont.css" />
<style>
.s1 {
color: rgb(55, 27, 87);
}
</style>
</head>
<body>
<!-- 常用class -->
<span class="iconfont icon-jiaoyichaxun"></span>
<span class="iconfont icon-jiaoyichaxun s1"></span>
</body>
上传矢量图：
l 思考：如果图标库没有项目所需的图标怎么办？
l 答：IconFont网站上传矢量图生成字体图标 Ø
与设计师沟通，得到SVG矢量图 Ø
IconFont网站上传图标，下载使用
字体图标-Iconfont
上传矢量图： l 上传 → 上传SVG图
l 浏览本地图标 → 去除颜色提交
l 加入购物车 → 下载使用
面试题
你知道font-class实现原理吗
给对应的标签 添加一个伪元素 这个伪元素 设置 content属性 属性值 等于 字体图标unicode编码
平面转换
Ø 2D转换
Ø transform: translate(水平移动距离, 垂直移动距离);
<style>
.box {
width: 500px;
height: 300px;
margin: 100px auto;
border: 4px solid #000;
}
.son1 {
width: 200px;
height: 100px;
background-color: tomato;
transition: all 0.5s;
}
.son2 {
width: 200px;
height: 100px;
background-color: #6cf;
transition: all 0.5s;
}
.box:hover .son1 {
transform: translateX(100px);
}
span {
}
</style>
</head>
<body>
<div class="box">
<div class="son1"></div>
<div class="son2"></div>
</div>
<span>12345,上山打老虎</span>
</body>
右侧盒子背景图
Ø background-position: right;
Ø left：向左侧移动自身宽度
Ø right：向右侧移动自身宽度
<style>
img {
width: 250px;
transition: 2s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="" />
</body>
Ø transform: rotate(角度);
注意：角度单位是deg
技巧：取值正负均可
Ø 取值为正, 则顺时针旋转
Ø 取值为负, 则逆时针旋转
转换原点 目标：使用transform-origin属性改变转换原点
<style>
img {
width: 250px;
transition: 2s;
}
img:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="./images/rotate.png" alt="" />
</body>
Ø 默认圆点是盒子中心点
Ø transform-origin: 原点水平位置 原点垂直位置;
取值
Ø 方位名词（left、top、right、bottom、center）
Ø 像素单位数值
Ø 百分比（参照盒子自身尺寸计算）
多重转换
<style>
.box {
width: 800px;
height: 200px;
border: 1px solid #000;
margin: 200px auto;
}
img {
width: 200px;
transition: all 2s;
}
.box:hover img {
transform: translate(600px) rotate(360deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./images/tyre1.png" alt="" />
</div>
</body>
缩放
目标：使用scale改变元素的尺寸
<style>
div {
height: 200px;
border: 5px solid rgb(155, 90, 90);
margin-bottom: 20px;
}
img {
height: 100%;
transition: 1s;
}
.box1:hover img {
transform: translateX(500px);
}
.box2:hover img {
transform: rotateZ(360deg);
}
.box3:hover img {
transform: scale(1.3);
}
</style>
</head>
<body>
<div class="box1">
<img src="./images/daji.jpg" alt="" />
</div>
<div class="box2">
<img src="./images/daji.jpg" alt="" />
</div>
<div class="box3">
<img src="./images/daji.jpg" alt="" />
</div>
</body>
Ø transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
Ø 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
Ø transform: scale(缩放倍数);
Ø scale值大于1表示放大, scale值小于1表示缩小
Ø 布局
Ø ::after
Ø 样式
Ø 居中
Ø 效果
Ø 缩放
Ø 透明度（opacity）
渐变
一般用于设置盒子的背景
.box {
width: 300px;
height: 200px;
border: 2px solid orange;
background-image: linear-gradient(45deg, #59c173, #a17fe0, #5d26c1);
}
