菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 李虎跃2022-11-23 [打印本页]

作者: 李维尼 时间: 2023-1-5 23:29
标题: 李虎跃2022-11-23

css3的2d转换

属性：transform

属性值：translate

translate(x,y) 对盒子进行x轴和y轴的位移

translateX(n) 对盒子进行X轴的位移

translateY(n) 对盒子进行Y轴的位移

特点

translate不会影响其他元素的位置

translate中的百分比单位指的是相对于元素自身的宽度和高度的百分比来确定的 translate(50%,50%)，第一个百分之50%指的是宽度的50%，第二个50%指的是高度的50%

利用2d转换实现定位盒子的水平和垂直居中：核心思想：先让盒子距离左侧50%的距离，距离顶部50%的距离，再使用translate属性移动盒子本身高度和宽度的一半，对行内元素没有效果

属性值：rotate 旋转角度

语法：transform:rotate(度数)

度数的单位是deg，度数为正数为顺时针旋转，度数为负数代表逆时针旋转

2D转换中心点：origin

transform-origin:x y;使用具体的像素值来进行中心点设置是，移动的参照点是盒子的左上角

transform-origin:right bottom; 可以使用方位名词来进行中心点设定，方位名词有：right/left/center/top/bottom

2D转换之缩放：scale

transform:scale(4); 代表宽和高都放大四倍

transform: scale(2,3); 代表宽放大2倍，高放大3倍

transform: scale(0.5,0.5); 代表宽度和高度都变为原来的一半（缩小0.5倍）

scale缩放和width/height设置盒子大小的区别：

width/height设置宽高是，上沿不动，只向下来改变宽高，会对其他的盒子有影响

scale进行缩放时，默认以盒子的中心点来进行缩放，并且不会影响其他的盒子

css3的动画制作

动画序列

0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列

在 @keyframes 中固定css的样式，可以创建由当前样式转化为新样式的动画效果（keyframes 叫做关键帧）

可以改变任意多的样式和任意多的次数

可以使用百分比来规定变化发生的时间，或者使用关键字“from”和“to”来实现等同于0%~100%

动画制作的步骤

定义动画

调用动画

动画的属性

@keyframes 规定动画

anmiation：所有动画属性的简写属性

anmiation-name：规定动画的名称

anmiation-duration：规定一个动画周期的时间，是必须值

anmiation-timing-function规定动画的运动曲线，默认是ease

anmiation-direction规定动画是否在下个周期逆行播放，默认是normal，逆向播放是alternate

anmiation-play-state规定动画是否暂停播放

anmiation-fill-mode 规定动画结束的状态，如果保持结束状态，用forwards，如果保持初始状态用backwards

复合属性：

amination:name/duration/timing-function/delay/iteration-count/direction/fill-mode;

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)