2020818日志邹瑞

学习知识点

转换

什么是转换

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

transform

  1. translate()位移
  2. scale()缩放(scale(n)
    n>1
    x轴和y轴都放大
    n=1
    x轴和y轴保持原尺寸
    0<n<1
    x轴和y轴都缩小
    -1<n<0
    x轴和y轴都缩小,并反转
    n<-1
    x轴和y轴都放大,并反转
    scale属性取值)
  3. rotate(n deg)旋转【正数顺时针,负数逆时针】
  4. skew()倾斜

transform-style

嵌套元素在3D空间显示(flat:子元素将不保留其3d位置;;preserve-3d:子元素将保留其3d位置)

转换原点

transform-origin(可用px、%、以及关键字(x:left/center/right;x:left/center/right))

取值个数为2为2D上位置;取值个数为3是3D个数方位;

过渡

过渡是使css的值,在一段时间内平缓变化的效果。过度的代码要写在原本样式中,过渡效果有去有回,如果写在hover中,过渡效果有去无回

使用transition属性

  1. 使用过渡,要设置两个css的状态(开始的值和结束的值)
  2. 过渡代码的编写位置,写在原来选择器中,过渡效果,有去有回,如果写在hover中,过渡效果,有去无回

动画

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

声明动画

​ @keyframes 名称{
​ 0%{ /代码样式/ }
​ 50%{ /代码样式/ }
​ 100%{ /代码样式/ }
}

使用动画用animation属性

今天李老师讲了很多东西,之前练习的时候用过一点,所以不是太陌生,我们还需努力

标签

评论

this is is footer