Osheep

时光不回头,当下最重要。

过渡与2D形变

1.过渡—-transition

①transition-property:all;用来指定可以过渡的属性,例如width、height、background等等。

②transition-duration:0s;用来规定过渡完成所需要的时间,单位是s.

③transition-timing-function:ease;指定完成过渡的动画的类型(就是我们所说的以何种速度变化来完成过渡)。

④transition-delay:0s;指的是延迟多久才开始执行动画,单位是s。

⑤对于transition的四个属性设置,可以有复合写法。写为transition: a   b   c  d;其中a 代表需要进行过渡变化的属性,b代表过渡完成需要的时间,c代表完成过渡的动画类型,d 代表延迟执行过渡的时间;而其中的c 我们可以写linear、ease、ease-in、ease-out、ease-in-out,也可以是贝塞尔曲线,贝塞尔曲线的四个数值我们可以自己调试,这样更有助于我们得到更好的过渡效果。

2. 形变-2D

说到2D形变我们就要提到transform。紧接着是transform的四个属性。

①transform:translateX(0px);/

                       translateY(0px);/

                      translate(0px);

                       translate(0px,0px);

这里表示的依次是在X轴上的偏移量,(我们就称之为位移);在Y轴上的位移;在X轴和Y轴上的位移的复合写法;注意,这里如果只写translate(0px);将会默认的是在X轴上的位移,在Y轴上没有效果。

②transform:scaleX(0.5);/

                       scaleY(0.5);/

                       scale(0.5);/

                      scale(0.5,0.5);

这里表示的依次是在X轴上的缩放,缩放倍数为0.5;在Y轴上的缩放,缩放倍数为0.5;在X轴和Y轴上缩放的复合写法,当然这里虽然只有一个值,但是默认的代表X轴和Y轴,如果两轴上的缩放倍数不一样,我们也可以写成scale(a,b)。

③transform:rotateX(0deg);

                      rotateY(0deg);

                      rotate(a);

                      rotate(a,b);

这里表示的是一X轴为参照进行偏转;以Y轴为参照进行偏转;当为rotate(a);属性值只有一个的时候,表示绕着元素的中心点进行偏转多少角度;而当为rotate(a,b),是指在X轴和Y轴上分别偏转多少角度。

④transform:skewX(0deg);

                      skewY(0deg);

倾斜,分别表示在X轴和Y轴上的倾斜角度,这个属性通常用来写平行四边形。

哈哈哈……没有了,下期继续。

点赞