CSS_进阶

CSS_进阶

1. 动画

1) 实现步骤

1. 定义动画帧

      @keyframes 动画名{
        from {
          // 开始帧
        }
        to {
          // 结束帧
        }
      }

      @keyframes 动画名{
        0% {
          // 开始帧
        }
        20% {

        }
        ...
        100% {
          // 结束帧
        }
      }

2. 设定动画（贺卡）

      animation-name: move; 
        动画名
      animation-duration: 2s;
        持续时间
      animation-timing-function: linear;
        时间曲线函数（自由落体，贝塞尔曲线）
      animation-fill-mode:forwards;
        填充模式，动画结束后保留哪一帧规则
      animation-iteration-count: 2;  
        动画迭代次数 infinite
      animation-direction: alternate-reverse;   
        动画执行的方向 from->to , to->from
      animation-play-state: paused;
        动画状态
      animation-delay: 1s;
        延迟时间
      animation: move 2s 1s 2 linear;
        动画的速写形式

2) 案例（呼吸灯）

    
    
    


    

        

            
            

                
                


                
            
        
        

            HI!
        

    

3) 案例（梦幻西游）

2. 动画库 animate.css

动画帧、动画设定规则都有第三方完成，我们直接使用class即可

1) 引入动画库

2) 使用

1. 直接调用动画设定类

2. 引用关键帧

3. 过渡

过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）

  transition-property: width;
    过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性
  transition-duration: 2s;
    过渡持续时间
  transition-delay: 0; 
    过渡延迟时间
  transition-timing-function: linear; 
    时间曲线函数
  transition:transform,background-color 2s,2s 0s linear;
    速写形式

4. 变形

transform:变形函数

  1. 缩放
    scale(2)
  2. 平移
    translate(100px,50px)
  3. 旋转
    rotate(360deg)
  4. 拉伸
    skew(45deg)

5. 媒体查询（响应式布局）

---

---

1. 动画题目：

1. 效果要求

（1. 定义：目前两圈的大小为常规大小
（2. 正常运动轨迹：两圈常规大小 -> 外圈向外扩大10px（2000ms） -> 外圈向内回归正常大小（2000ms）-> 内圈向内缩小12px（2500ms) -> 内圈放大至常规大小（2500ms) -> 循环
（3. 加速运动轨迹：两圈常规大小 -> 外圈向外扩大10px（1000ms） -> 外圈向内回归正常大小（1000ms）-> 内圈向内缩小12px（1200ms) -> 内圈放大至常规大小（1200ms) -> 循环
（4. 加速运动轨迹下，当文字显示为：“我很生气”时，内圈的颜色变为红色
（5. 加速运动轨迹下，当文字显示为：“我很高兴”时，内圈的颜色变为绿色

2. 第三方库(职业技能)

（1.iconfont
字体图标库，原理：网络字体 @font-face() font-family
（2.bootstrap
栅格布局（grid layout，原理：flex、float
（3.animate.css
动画库，原理：animation