前端小结1（空间平面转换及动画）

最新推荐文章于 2024-07-05 16:41:23 发布

曦风雨后

最新推荐文章于 2024-07-05 16:41:23 发布

阅读量177

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/XiaoChen10086/article/details/129139567

版权

一、总结

1、字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

字体图标展示的是图标，本质是字体
处理简单的、颜色单一的图片
灵活性:灵活地修改样式,例如:尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便:
- 下载字体包
- 使用字体图标
使用字体图标- 类名
- 引入字体图标样式表
```
<link rel="stylesheet" href="./iconfont.css">
```
- 调用图标对应的类名,必须调用2个类名
  - iconfont类：基本样式，包含字体的使用等
  - icon-xxx：图标对应的类名
IconFont网站上传矢量图生成字体图标
- 与设计师沟通,得到SVG矢量图
- IconFont网站上传图标，下载使用

2、平面转换

目标:使用transform属性实现元素的位移、旋转、缩放等效果

平面转换
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D转换
位移属性 transform
- 语法
  transform: translate(水平移动距离，垂直移动距离);
- 取值（正负均可，X轴正向为右，Y轴正向为下）
  - 像素单位数值
  - 百分比（参照物为盒子自身尺寸）
- 技巧
  translate() 如果只给出一个值,表示x轴方向移动距离
  单独设置某个方向的移动距离: translateX() & translateY()
旋转属性 rotate
- 语法
  transform: rotate（角度);
- 技巧
  取值正负均可，角度单位是deg，正值为顺时针反向，负值反之
转换原点 transform-origin
- 语法
  - 默认圆点是盒子中心点
  - transform-origin:原点水平位置原点垂直位置;
- 取值
  - 方位名词(left、 top、 right、 bottom、 center)
  - 像素单位数值
  - 百分比（参照盒子自身尺寸计算）
复合属性
- 实现边走边转，其中旋转可以改变坐标轴向
  （正确写法）transform: translate(600px) rotate(360deg);
  （错误写法）transform: rotate(360deg) translate(600px);
缩放属性 scale
- 语法
  transform: scale（x轴缩放倍数 y轴缩放倍数）;
- 技巧
  一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
  transform: scale(缩放倍数);
注意事项
- 一个元素写多个transform属性，会有层叠性（下面的属性值会覆盖上面的）

3、渐变背景

目标:使用background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

background-image: linear-gradient(
	颜色1,
	颜色2
);

4、空间转换

目标:使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间:是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform

空间位移

目标：使用translate实现元素空间位移效果

语法
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
取值（正负均可)
- 像素单位数值
- 百分比

透视

目标:使用perspective属性实现透视效果

思考:生活中,同一个物体,观察距离不同,视觉上有什么区别?一
答：近大远小、近清楚远模糊
思考:默认情况下,为什么无法观察到Z轴位移效果?
答：Z轴是视线方向,移动效果应该是距离的远或近,电脑屏幕是平面,默认无法观察远近效果
属性(添加给父级)
perspective: 值;
取值：像素单位数值，数值一般在800-1200
透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离

空间旋转

语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
左手法则
判断旋转方向:左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向
拓展
- rotate3d(x, y, z，角度度数）：用来设置自定义旋转轴的位置及旋转的角度
- x ，y，z 取值为0-1之间的数字

立体呈现

目标:使用transform-style: preserve-3d呈现立体图形

思考:使用perspective透视属性能否呈现立体图形?
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法
- 添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d;
- 按需求设置子盒子的位置(位移或旋转)

空间缩放

语法
- transform: scaleX(倍数）;
- transform: scaleY(倍数）;
- transform: scaleZ(倍数）;
- transform: scale3d(x, y, z);

5、动画

目标：使用animation添加动画效果

思考：过渡可以实现什么效果？
答：实现2个状态间的变化过程
动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

实现步骤：

定义动画

/* from内部写开始样式，to内部写结束样式 */
@keyframes 动画名称 {
/*动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 */
from {}
to {}
}

或是

/* 百分比指的是动画总时长的占比 */
@keyframes 动画名称 {
0%{}
10%{}
25%{}
100% {}
}

使用动画

animation： 动画名称 动画花费时长;

动画属性

animation： 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

示例

/* 匀速动画*/
 animation: change 1s linear; 
/*分步动画,重复3次播放 */
 animation: change 1s steps(4) 1s 3; 
/* 无限循环 */
 animation: change 1s infinite alternate; 
/* 默认值，动画停留在最初的状态 */
 animation: change 1s backwards; 
/* 动画停留在结束的状态
 animation: change 1s forwards;

非复合属性写法

使用steps实现逐帧动画
- 精灵动画制作步骤(复合动画用，隔开)
  - 准备显示区域
    - 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
  - 定义动画
    - 改变背景图的位置(移动的距离就是精灵图的宽度)
  - 使用动画
    - 添加速度曲线steps(N)，N与精灵图上小图个数相同
    - 添加无限重复效果