1、字体图标iconfont使用
下载字体包：
l
登录
（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 →
添加至项目 → 下载至本地--》解压到项目下--》link连接引入到网页--》<i class="iconfont icon-zhankai">引入＋号</i>
使用字体图标 - Unicode编码：
l
引入样式表：
iconfont.css
l
复制粘贴图标对应的Unicode编码
l
设置文字字体
使用字体图标 – 类名：
l
引入字体图标
样式表
l
调用图标对应的
类名，必须调用2个类名
l
iconfont类：基本样式，包含字体的使用等
l
icon-xxx：图标对应的类名
上传矢量图：
- l 思考：如果图标库没有项目所需的图标怎么办？
- l 答：IconFont网站上传矢量图生成字体图标
- Ø 1. 与设计师沟通，得到SVG矢量图
- Ø 2. IconFont网站上传图标，下载使用
2、平面转换概念
目标：使用
transform
属性实现元素的
位移
、
旋转
、
缩放
等效果
l
平面转换
改变盒子在平面内的形态（位移、旋转、缩放）
2D转换
目标：使用
translate
实现元素
位移
效果
transform: translate(水平移动距离, 垂直移动距离);
l
取值（
正负
均可）
像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
translate()如果只给出
一个值
, 表示
x轴
方向移动距离
单独设置某个方向的移动距离：
translateX()
&
translateY()
<head>
<style>
.father{
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid red;
}
.son{
width: 200px;
height: 100px;
background-color: pink;
//图片移动速度
transition: all 1s;
}
.father:hover .son{
//图片移动方向和距离
transform: translateY(100px);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
background-position: right;设置背景图像起始位置的
CSS样式属性
使用rotate实现元素旋转效果
- transform: rotate(角度);
- 注意：角度单位是deg
- 技巧：取值正负均可
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转
使用transform-origin属性改变转换原点
- 默认圆点是盒子中心点
- transform-origin: 原点水平位置 原点垂直位置;
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比（参照盒子自身尺寸计算）
- 复合属性，先写位移，再写旋转
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
2、使用scale改变元素的尺寸
l
思考: 改变元素的width或height属性能实现吗？
transform: scale(x轴缩放倍数, y轴缩放倍数);
一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
使用scale改变元素的尺寸
l
播放按钮
Ø
布局
Ø
::after
Ø
样式
Ø
居中
Ø
效果
Ø
缩放
Ø
透明度（opacity：0-1）
使用background-image属性实现渐变背景效果
l
渐变是多个颜色逐渐变化的视觉效果
l
一般用于设置盒子的背景
3、空间转换
- 目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
- l 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
- l 空间转换也叫3D转换
- l 属性：transform
-
必须给父元素加 perspective: 1000px;
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（
正负
均可）
像素单位数值
百分比
4、透视
目标：使用
perspective
属性实现
透视
效果
l
思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
答：近大远小、近清楚远模糊
l
思考：默认情况下，为什么无法观察到Z轴位移效果？
答：Z轴是视线方向，移动效果应该是距离的
远或近
， 电脑屏幕是平面，默认无法观察远近效果
l
属性
（添加给父级）
Ø
perspective: 值;
Ø
取值：像素单位数值， 数值一般在
800 – 1200
。
l 作用 Ø 空间转换时，为元素添加 近大远小、近实远虚 的 视觉效果
l 作用 Ø 空间转换时，为元素添加 近大远小、近实远虚 的 视觉效果
5、空间旋转
目标：使用
rotate
实现元素
空间旋转
效果
Ø
rotate3d(x, y, z, 角度度数) ：用来设置
自定义旋转轴的位置
及旋转的角度
Ø
x，y，z 取值为0-1之间的数字
6、立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
l
思考：使用perspective透视属性能否呈现立体图形？
l
答：
不能
，perspective只增加近大远小、近实远虚的视觉效果。
Ø
添加
transform-style: preserve-3d;
Ø
使子元素处于真正的
3d空间
7、空间缩放
目标：使用
scale
实现
空间缩放
效果
Ø
transform: scaleX(倍数);
Ø
transform: scaleY(倍数);
Ø
transform: scaleZ(倍数);
Ø
transform: scale3d(x, y, z);
8、动画
目标：使用
animation
添加
动画
效果
l
思考：过渡可以实现什么效果？
l
答：实现2个状态间的变化过程
- l 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
- l 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
- l 构成动画的最小单元：帧或动画帧
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* animation: change 1s linear; */
/* 分步动画 */
/* 3: 重复3次播放 */
/* animation: change 1s steps(3) 1s 3; */
/* 无限循环 */
/* animation: change 1s infinite alternate; */
/* 默认值, 动画停留在最初的状态 */
/* animation: change 1s backwards; */
/* 动画停留在结束状态 */
animation: change 1s forwards;
}
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
注意：
Ø
动画名称和动画时长必须赋值
Ø
取值不分先后顺序
Ø
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
使用steps实现逐帧动画
.box:hover {
/* 鼠标移入的时候暂停动画 */
animation-play-state: paused;
}
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
