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

标题: H5C3以及流式布局和flex布局-20221123 [打印本页]

作者: I1220 时间: 2022-11-23 19:10
标题: H5C3以及流式布局和flex布局-20221123
本帖最后由 I1220 于 2022-11-23 19:26 编辑

今日学习内容
一css的2D转换 transform
1.]对盒子进行x,y轴的位移translate(x,y) translateX(n) translateY(n)
不影响其他盒子的位置，数值可以写百分数，这里的百分数是指自身的宽高
对行内元素无效2.角度的旋转：transform:rorate (90deg)正值代表顺时针
3.中心点的转换：transform-origin:x y可以使用具体像素值表示可以使用方位名词表示
4.缩放效果：transform:scale(3)       长度和宽度都放大3倍,注意是向四周放大或缩小 transform:scale(2,3)    长度放大2倍，宽度放大3倍缩放时候不影响其他盒子，而通过width和height改变时会影响其他盒子
二CSS3的动画制作animation
1.0%为动画的开始状态，100%为动画结束状态
在head中用@keyframes flash 设置动画开始和结束的状态
可以设置任意多的次数和改变任意多的样式
可以用百分比规定动画发生的时间，也可以使用关键字from to 等同于0%-100%
2.制作步骤
定义动画
@keyframes move
调用动画
animation-name:flash
animationn-duration:2s
动画持续时间
3.其他属性
animation-timing-function动画曲线：linear,ease,ease-in,ease-in-out,ease-out)
animation-delay 动画延迟播放的时间
animation-direction  动画是否逆向：alternate/normal
animation-iteration-count 动画播放的次数；infinite/数字
animation-play-state    动画播放的状态：paused/running
animation-fill-mode    动画结束的状态：forwards/backwards 默认值
4.复合属性
animation:name duration timing-function delay iteration-count direction fill-mode
5.步长steps
指定了将整个动画分成多少步来完成，如果有steps() 就不需要其他的运动曲线属性值了

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