云创动力移佛弟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(粘性定位)当是多个定位元素,在后面的定位元素将出现在先定位与元素的顶部。

二、心得体会

对今天学的东西掌握还是可以的,没有太大的问题存在,但对动画那里还是有一点点问题,对其他的都可以。

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1