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

标题: 王嘉乐-2022-10-24 前端 [打印本页]

作者: yousay！ 时间: 2022-10-25 00:41
标题: 王嘉乐-2022-10-24 前端
一、今日学习内容1.CSS3过渡 transition：要过渡的属性  花费的时间  运动曲线  何时开始;
2.CSS3的2D转换 translate （2D位移）
对盒子的X轴和Y轴进行位移  transform:translate(x,y)；对盒子单独进行X轴的位移 transform:translateX(n)；
特点：translate对行内元素没效果  translate的值如果是百分比，就代表移动的距离是相对于元素自身的宽高来决定的 translate(50%, 50%)
translate不会影响其他元素的位置（和相对定位类似）
rotate （2D旋转)  transform:rotate(180deg); 代表元素顺时针旋转180度，当旋转的角度是负值的时候代表逆时针进行旋转
scale （2D缩放） transform:scale(2,3);  代表宽放大2倍，高放大3倍
scale进行缩放时，默认是以盒子中心点来进行缩放的，不会对用宽高进行设置时，上沿不动，只向下方来改变宽高，会对其他的盒子产生影响
属性：transform-origin  设置中心点
transform-origin:x,y;  当单位为具体的像素值时，距离的相对起始位置在元素的左上角
3.CSS3动画制作
1、0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
2、在 @keyframes  中来规定css的样式，keyframes叫做关键帧
3、可以用百分比来规定变化发生的时间，或者用关键字from 和 to来规定，等同于0%~100%
多个状态的动画制作
animation-timing-function属性
steps()：步长，就是分几步来完成动画，如果有了steps(),就不需要写 ease或者linear等运动曲线值

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