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

标题: 胡宇林11.23 [打印本页]

作者: ther12 时间: 2022-11-23 19:31
标题: 胡宇林11.23
CSS3的2D转换

1.transform

属性值

translate（X,Y）：对盒子进行X，Y 轴位移

translateX（N）：可以单独对X轴进行移动

translateY（N）：可以单独对X轴进行移动

居中效果

position：absolute；

left：50%

top：50%

transform：translate（-50%，-50%)

特点

（1）transform不影响其他元素位置

（2）transform中的百分比单位指的是相对元素自身的宽高的百分比来确定的translate（50%，50%），第一个50%指的是宽度的50%，第二个是高度的50%。

对行内元素没有效果

2.rotate 旋转角度

transform：rotate（n deg）；n代表数字，deg为单位。

度数为正代表顺时针，读数为负代表逆时针

转换中心点：transform-origin:x y;

使用具体的像素值来进行中点的设置

例如：transform-origin:100px,100px;

使用方位词来设置中心点

例如：transform-origin:right bottom;

3.2D转换的缩放

使用方法

transform：scale（3）代表宽高放大3倍

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

transform：scale（0.5,0.5）代表宽高都是原来的一半

scale缩放和宽高缩放设置盒子大小的区别

宽高设置，上沿不动，只是向下来改变宽高，会对盒子产生影响

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

4.CSS的动画制作

概念

动画序列：设置0%时的状态，100%是动画的结束后，这样的规则叫做动画序列

在@keyframes 里固定CSS的样式，可以创建点前样式转化为新的样式的动画效果。（keyframes关键帧），可以任意多的样式和任意多的次数，可以使用百分比来规定变化的时间，或者使用关键词from，to来实现等同于0-100%

规定动画：@keyframes

规定动画的名称：animation-name

规定动画完成一个周期所花费的秒或者毫秒，默认是0，必选项animation-duration

规定动画的速度曲线。默认是“ease”

animation-timing-function

动画的运动曲线

匀速linear

逐渐变速ease

加速ease-in

减速ease-out

先加速后减速ease-in-out

步长：animation-timing-function：steps（n）; n代表步数

规定动画何时开始，默认是0animation-delay

规定动画被播放的次数，默认是1，还有infiniteanimation-iteration-count

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

规定动画是否正在运行或暂停。默认是running，还有paused animation-play-start

规定动画结束后状态，保持forwards回到起始backwards animation-fill-mode

复合写法：animation：name duration timing-functiondelay iteration-count direction fill-mode;

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