20200818卢雨杰

今日学习内容

转换

改变元素在页面中的位置translate,大小scale,角度rotate,以及形状即为转换

转换的分类分为: 2D转换和3D转换,2D是平面3D是空间内即在xyz中的转换

在2D转换中scale缩放属性的运用

1597758170135

skew()倾斜属性的运用:

可以在x轴或y轴上倾斜,若在x轴上倾斜且取值为正,则对象在y轴上逆时针倾斜,若值为负

则顺时针倾斜

若在y轴上倾斜且取值为正,则对象在x轴上顺时针倾斜,若值为负则在x轴上逆时针倾斜

小结:向 x轴发生倾斜,实际上改变的是y轴的角度 , 向着y轴发生倾斜,实际上改变的是x轴的角度

转换原点

transform-origin :取值x轴:left/center/right

取值y轴:top/center/bottom

1.可以以px为单位

2.可以以%号为单位

动画过渡

transition

属性值

transition-property ( 检索或设置对象中的参与过渡的属性 )

transition-duration ( 检索或设置对象过渡的持续时间 )

transition-timing-function ( 检索或设置对象中过渡的动画类型(过渡时间曲线函数)

transition-delay ( 检索或设置对象延迟过渡的时间 )

动画

将多个过渡放在一起,使用关键帧来控制动画的每一个状态,使得元素从一种样式逐渐变化为*另一种样式

关键帧: 动画执行的时间节点,一个动画至少2个关键帧

动画的声明:@keyframe +名称

liner 匀速

infinite 持续的

css的优化

标签

评论

this is is footer