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

标题: CSS3-宋泽_2022.11.23 [打印本页]

作者: zzz3 时间: 2022-11-24 01:59
标题: CSS3-宋泽_2022.11.23
今日学习：
css的2d转换
属性：transform
属性值：
translate（x，y）对盒子进行x轴和y轴的位移
translateX（n）对盒子进行x轴的位移
translateY（n）对盒子进行Y轴的位移
特点：
translate不会影响其他盒子的位置
translate中的百分比指的是相对于元素自身的百分比，移动自身元素百分比的位置

利用2d转换实现定位盒子的水平和垂直居中
top：50%
left：50%
transform：translate（-50%，-50%）
对行内元素没有效果

属性值：
rotate 旋转角度
语法：
transform：rotate（度数）
度数（deg）

2d转换中心
语法：
transform-origin：x y
使用像素进行中心点设置，以盒子为参照物
也可以用方位名词设置中心点

2d转换缩放
transform：scale（n）代表从中心宽高放大n倍
scale缩放不会影响其他盒子，width/height缩放时只会向下缩放，并且会影响其他盒子

CSS的动画制作
动画序列
1. 0%是动画的开始 100%是结束，这样的规则是动画的序列
2.在@keyframes中固定css的样式，可以创建由当前的样式转化为新样式的动画效果
3.可以改变任意多的样式和任意多的次数
4.可以使用百分比来规定变化发生的时间，或者使用关键字from和to来实现，等同于0-100%

动画制作的步骤
1.定义动画
2.调用动画
animation-name 调用动画名称
animation-duration 完成动画的时间
animation-timing-function 定义动画的速度曲线
animation-delay：n s 规定动画n秒后开始
animation-iteration-count：infinite 无限循环
animation-iteration-count：2 循环两次
animation-direction：alternate；是否在下一个周期播放 alternate逆向播放 normal默认
animation-fill-mode：forwards 规定动画结束后保持结束时的状态
回到最初用backwords

：hover中
animation-play-state：paused 鼠标悬浮时暂停

步长
animation-timing-function：steps（n）
代表分成多少步来完成

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