MSI_0524ҦȺӢ

一.知识点总结

​ 1.transform是css3的属性,该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

​ transform的值有:

描述
none 定义不进行转换。
translate(x,y) 定义2D转换。移动
translate3d(x,y,z) 定义3D转换。
translateX(x) 定义转换,只是用X轴的值
translateY(y) 定义转换,只是用X轴的值
translateZ(z) 定义转换,只是用Z轴的值
scale(x,y) 定义2D缩放转换
scale3d(x,y,z) 定义3D缩放转换
skew(x-angle,y-angle) 定义沿着X和Y轴的2D倾斜转换
rotate(angle) 定义2D旋转
rotate3D(angle) 定义3D旋转
rotateX(angle) 定义沿着X轴的3D旋转
rotate(angle) 定义沿着Z轴的3D旋转

​ 2.transition

​ transition属性设置元素当过渡效果,四个简写属性为:

​ transition-property 制定CSS属性的name,transition效果

​ transition-duration 效果需要指定多少秒或毫秒才能完成

​ transition-timing-function 指定transition效果的转速曲线

​ transition-delay定义transition效果开始的时候

​ 注:transition-timing-function常用的值有:

描述
liner 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果

​ 3.动画

​ 动画属性可以使得值逐渐从一个值变化到另一个值

@keyframes animationName{
       from{}
       to{}
}
说明
animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或 毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔
animation-iteration-count 定义动画的播放次数
animation-direction 指定是否应该轮流反向播放动画
animation-direction 指定是否应该轮流反向播放动画
animation-play-state 指定动画是否正在运行或已暂停

​ 4.正常布局流是指在不对页面进行任何布局控制时。

​ 5.float,常用right和left,以px为单位。

​ 6.position;relative,相对定位,常使用Top,bottom,left和right属性。

​ position:absolut,绝对定位。

​ 7.z-index,是对z轴的参考

​ 8.position:sticky,粘性定位。

二.心得体会

​ 马老师讲授的非常棒,给马老师点个赞。

三.疑问

​ 1.请问马老师如果要做后端方向,对前端的知识需要了解到什么程度?

标签

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