陈紫怡-20221024-H5C3.2

一、今日学习内容：

• css3过渡
  
  • 概念
    
    • 过渡可以在不使用flash或者js前提下，可以实现从一种样式转化为另一种样式的效果(IE9以下版本不支持）
      
  • 语法：
    
    • transition：要过渡的属性     花费时间     运送曲线     何时开始；
      
    • 1.要过渡的属性
      
      • 想要变化的css属性，可以是宽度、高度、背景颜色、内外边距等，如果想要改变所有的属性，直接all就可以
        
    • 2.花费的时间
      
      • 单位是秒，必须写，例：.5s
        
    • 3.运动曲线
      
      • 默认的值是ease，可以省略
        
    • 4.何时开始（延时）
      
      • 单位是秒，必须写，可以设置延迟出发的时间，默认0s
        
• css3的2d转换
  
  • 属性：transform
    
    • 属性值
      
      • 对盒子的x轴和y轴进行位移
        
        • transform：translate（x,y);
          
      • 对盒子单独进行x轴的位移
        
        • transform：translateX（n);
          
      • 对盒子单独进行y轴的位移
        
        • transform：translateY（n);
          
      • 特点
        
        • translate不会影响其他元素的位置（与相对定位相似）
          
        • translate的值如果是百分比，就代表移动的距离相对于元素自身的宽高来决定的，translate（50%，40%）
          
        • translate对行内元素没效果
          
      • 利用translate设置盒子的水平垂直居中
        
      • rotate（角度转换、旋转）
        
        • 该属性值可以对元素进行旋转设置，transform：rotate（度数）
          
        • eg：transform：rotate（180deg），顺时针旋转180度，负值为逆时针旋转
          
      • scale（缩放）
        
        • 语法：transform：scale（x,y）;里面的x代表x轴缩放倍数，y代表y轴的缩放倍数
          
        • 使用方法：
          
          • transform：scale（1,1），代表缩放一倍，没有变化
            
          • transform：scale（2,2.5），代表x缩放2倍，y放大2.5倍
            
          • transform：scale（2），代表x,y都缩放2倍
            
          • transform：scale（.5），代表x,y都缩小0.5倍
            
        • scale缩放和width/height设置盒子大小的区别
          
          • 直接用宽高进行设置是，上沿不动，只向下方来改变宽高，会对其他的盒子产生影响
            
          • scale进行缩放时，默认是以盒子中心点来进行缩放的，不会对其他盒子产生影响
            
  • 属性：transform-origin设置中心点
    
    • 语法：transform-origin：x,y;
      
    • 1、使用方位名词来设置中心点
      
    • 2、利用像素值来设定元素的中心点
      
    • eg
      
    • 注意：
      
      • 当单位为具体的像素值时，距离的相对其实位置在元素的左上角
        
• CSS3动画制作
  
  • 动画序列
    
    • 1、0%是动画的开始，100%是动画的结束，这样的规则叫做动画序列
      
    • 2、在@keyframes 来规定css的样式，keyframes叫做关键帧
      
    • 3、可以用百分比来规定变化发生的时间，或者用关键字from和to来规定，等同于0%-100%
      
  • 动画的使用步骤：
    
    • 1、定义动画
      
    • 2、调用动画
      
    • 3、定义动画的进行时间
    • 多个状态的动画制作
    • 动画常用属性
    • animation-timing-function属性：
      
      • steps()：步长，就是分几步来完成动画，有这个就不需要写ease或者linter等运动曲线