云创动力移佛弟20210524
日志
一、学习总结
1、transform：将2D和3D元素进行旋转和缩放，移动倾斜。
| 值 | 属性 |
|---|---|
| none | 定义不进行转换 |
| translate(x,y) | 定义 2D 转换。移动 |
| translateX(x) | 定义转换，只是用 X 轴的值 |
| translateY(y) | 定义转换，只是用 Y 轴的值 |
| scale | 定义2D缩放转换 |
2、transition：元素属性设置当过渡效果。
| 值 | 属性 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
3、动画
让一个值变成另外一个值。属性有尺寸大小，数量，百分比，颜色。
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration ：动画指定需要多少秒或毫秒完成
animation-timing-function ：设置动画将如何完成一个周期
animation-delay ：设置动画在启动前的延迟间隔。
animation-iteration-count： 定义动画的播放次数。infinite 无限次
animation-direction*：指定是否应该轮流反向播放动画。
4、布局
就是属性界面的元素布局设置。
布局的细节有：
正常布局流 。
display 属性 。
弹性盒子 。
网格 。
浮动 。
定位 。
CSS 表格布局 。
多列布局。
5、浮动
float：属性最初只用于在成块的文本内浮动图像，但是现在它已成为在网页上创建多列布局的最常用 工具之一。
float: left; 向右浮动
float: right; 向左浮动
clear：使属性元素在当前位置停止浮动。
clear left ：停止任何活动的左浮动
clear right ：停止任何活动的右浮动
clear both ：停止任何活动的左右浮动
6、定外
静态定位：它只是意味着将元素放入它在文档布局流中的正常位置 。
相对定位 ：让它 与页面上的其他元素重叠。
绝对定位
position:absolute; 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。绝对定 位的元素不再存在于正常文档布局流中
固定定位：元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。
z-index（粘性定位）当是多个定位元素，在后面的定位元素将出现在先定位与元素的顶部。
二、心得体会
对今天学的东西掌握还是可以的，没有太大的问题存在，但对动画那里还是有一点点问题，对其他的都可以。
近期评论