过渡动画转换

  • transition: 2s ease 1s(延迟); 过渡

    • transition-property: width, height /all; 过渡属性
    • transition-duration: 2s, 1s /2000ms; 持续时间
    • transition-timing-function: ease慢快慢/linear匀速/ease-in加速运动/ease-out减速运动/ease-in-out先加速后减速; 过渡时序函数
    • transition-timing-function: cubic-bezier(.24,.95,.82,-0.88)贝塞尔曲线; 过渡时序函数
    • transition-timing-function: steps(2, end/start)分两步，时间开始或者结束时执行一步
    • transition-delay: 过渡效果的延迟进行，等待一段时间后在执行动画

  • animate: test; 动画

    • animate-duration: 2s; 网页刷新就执行持续时间2s
    • animate-delay
    • animate-timing-function
    • animate-iteration-count: 3/infinite无限; 动画执行次数
    • animate-direction: normal/reverse相反/alternate设置重复执行时from-to-from交替始末位置运动; 动画执行方向
    • animate-play-state: running开始/paused暂停; 动画执行状态
    • animate-fill-mode: none默认动画结束回到初始位置/forwards结束回到结束位置/backwards动画开启延时等待时元素立即处于from的状态/both; 动画填充模式
    • 声明动画 test:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      @keyframes test {
        /* from 开始位置 */
        from {
          margin-left: 0px;
        }
        /* to结束位置 */
        to{
          margin-left: 700px;
        }
      }

  • transform 转换

    • translateX(100px)/translateY()/translateZ(); 相对自身平移，不会脱离文档流，先设置视距perspective(800px) 再设置translateX/Y/Z()
      1
      2
      3
      .box1:hover{
          transform: perspective(800px) translateZ(100px);
      }
      • 宽高被内容撑开的元素居中效果设置：
        1
        2
        3
        4
        5
        6
        .box{
          position:absolute;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
        }
    • rotateX(turn圈)/rotateY()/rotateZ(45deg): 沿着某个轴旋转，也是先设置perspective视距在设置旋转
      1
      2
      3
      .box1:hover{
        transform: perspective(800px) translateZ(400px) rotateY(180deg); 先靠近400px再绕Y旋转180度。
      }
    • backface-visibility: hidden/visible; 当元素沿Y旋转180deg时是否选择显示背面
    • transform-style: preserve-3d; 当元素想展示3d效果时开启
    • transform: scaleX(2)水平缩放/scaleY()垂直缩放/scale()双向缩放; 放大缩小效果
    • transform-origin: 0 0; 变形原点

flex基础

弹性容器

  • display: flex; 开启弹性容器
  • flex-direction: row/row-reverse/column/column-reverse元素排列方式（主轴）
  • flex-wrap: nowrap默认不换行/wrap/wrap-reverse辅轴反方向换行; 弹性子元素是否换行
  • flex: row wrap; 排列方式和换行方式简写
  • justify-content: 主轴空白空间分配
    • flex-start
    • flex-end
    • center
    • space-around空白平均分配到元素的两侧
    • space-evenly空白平均分配到元素单侧
    • space-between空白平均分配到元素中间（盒子两侧无空白）;
  • align-item: 弹性子元素在辅轴上如何对齐
    • stretch; 拉伸所有元素辅轴长度一致
    • flex-start; 元素不拉伸沿着辅轴起始边上对齐 长度被内容撑开
    • flex-end; 元素不拉伸沿着辅轴终边上对齐 长度被内容撑开
    • center; 元素在辅轴居中对齐
    • baseline; 沿着文字基线对齐
  • align-content: 辅轴的空白空间分配（似justify-content）
    • flex-start/flex-end/center/space-around/space-evenly/space-between

弹性元素

  • flex-grow: 0; 弹性子元素的伸展系数
  • flex-shrink: 1; 弹性子元素收缩系数，0为收缩
  • flex-basis: auto默认参考width; 弹性元素的主轴上的基础长度
  • flex: 默认值initial(0 1 auto)/auto（1 1 auto）/none（0 0 auto）; 伸展 收缩 基础长度简写，
  • align-self: 覆盖align-item为单独一个元素设置辅轴上的对齐方式
  • order: 1/2/3…; 指定每个元素的排列顺序

移动端适配

  • 使视口和移动端设备有完美的像素比

    1
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 使用vw（viewport width）视口宽度作为像素单位

    • 设计图(width=750px) <=> 视口(width=100vw) ===>> 0.13333..vw = 1px
    • 1125px <=> 10vw ==>> 0.08888..vw = 1px
    • vw与rem结合
      1
      2
      3
      4
      5
      6
      7
      8
      html {
        /*设计图750px */
        font-size: 13.33vw;
      }
      .box {
         /* 宽度200px */
        width: 2rem;
      }

媒体查询

为不同设备设置不同样式

  • 类型：all 所有设备/ print 打印设备/ screen 带屏幕设备/ speech 屏幕阅读器

    1
    2
    3
    4
    5
    @media print, screen {
      body {
        background-color: #bfa;
      }
    }

  • 为不同范围视口宽度设定样式

    • min-width 视口大于min-width指定值生效
    • max-width 视口小于max-width指定值生效
      1
      2
      3
      4
      5
      @media screen (min-width: 500px) and (max-width: 700px){
        body {
          background-color: #bfa;
        }
      }