一.过渡（transition）

1.通过过渡可以指定一个属性发生变化时的切换方式

  • 通过过渡能创建更好的效果，提升用户体验

  • 谁需要变化就把过度属性加给谁

    2.过渡的属性

    （1）transition-property：指定要执行过渡的属性

  • 多个属性逗号隔开

  • 若所有属性都要执行，可直接使用关键字all -> transition-property：all；

（2）transition-duration：指定过渡效果持续的时间

  • 根据要过度的属性指定时间，逗号隔开
  • 1s=1000ms
  • transition-duration：2s；

（3）transition-timing-function：过渡的时序函数，指定过渡的运行状态，可选值如下

  • ease：默认值，慢速开始，先加速，在减速
  • linear：匀速运动
  • ease-in：加速运动
  • ease-out：减速运动
  • ease-in-out：先加速，后减速
  • 也可以通过贝塞尔函数transition-timing-function：cubic-bezier（）指定

（4）transition-delay：过渡效果的延伸

  • 属性值是时间，表示等待设定的时间后在执行过渡
  • transition-delay：2s；

（5）可以通过transition直接指定各种效果（简写）

  • 格式为 transition：要过度的属性 花费时间 运动曲线 何时开始

（6）过渡练习

  • 图片案例：

  • 2021.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>Document</title>
    8. <style>
    9.    .box1{
    10.        width: 132px;
    11.        height: 271px;
    12.        margin: 0 auto;/*居中*/
    13.        background-image: url("./abc/2021.png");/*引入背景图片*/
    14.        background-position: 0 0;
    15.        transition: 0.3s steps(3);
    16.    }
    17.    .box1:hover{
    18.        background-position: -396px 0;
    19.    }
    20. </style>
    21. </head>
    22. <body>
    23. <div class="box1">
    25. </div>
    26. </body>
    27. </html>

    二.动画

    1.概述：与过渡类似，用来实现动态效果。不同的是过渡要在某个属性发生变化时才会触发，而动画可以自动触发

    2.设置动画效果必须要先设置一个关键帧，关键帧设置了动画执行每一个步骤

  • 一张图片就是一帧

    3.关键帧

    （1）设置关键帧：@keyframs 名字{from{} to{}}

  • 名字随便起，关键帧的设置在style标签，但不是在元素标签里

  • from{}表示动画开始的位置
  • to{}表示动画结束的位置
  • 设置好关键帧后，在想要实现动画的选择器中进行指定

（2）关键帧不仅值可以设置from和to，还可以按照百分比设置

        @keyframes one{
            from{
                background-position: 0 0;
            }
            33%{
                background-position: -100px 0;
            }
            66%{
                background-position: -200px 0;
            }
            to{
                background-position: -474px 0;
            }
        }

4.动画（animation）

（1）animation-name：关键帧名字；

  • 实现动画必须先指定关键帧

（2）animation-duration：动画执行时间
（3）animation-delay：动画的延迟
（4）animation-timing-function：动画的时序函数，指定动画的运行状态，可选值如下

  • ease：默认值，慢速开始，先加速，在减速
  • linear：匀速运动
  • ease-in：加速运动
  • ease-out：减速运动
  • ease-in-out：先加速，后减速
  • 也可以通过贝塞尔函数transition-timing-function：cubic-bezier（）指定

（5）animation-iteration-count：动画执行的次数

  • 属性值可设置为数字，1就是一次，2就是两次
  • 还可以设置为infinite，表示无限次

（6）animation-direction：指定动画运行的方向

  • 默认值为normal，根据from到to运行
  • 设置为reverse，就从to到from
  • 设置为alternate，从from到to，重复执行时就是从to到from
  • 设置为alternate-reverse，从to到from，重复执行时就是从from到to

（7）animation-play-state：控制动画的运行状态

  • 设置为running时，表示正常运行
  • 设置为paused时，表示停止运行

（8）练习让图片跑起来：

  • 图片：
    OIP-C.jpg

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .box1{
          width: 79px;
          height: 91px;
          margin: 0 auto;
          background-image: url("./abc/OIP-C.jpg");
          animation: one 1s steps(6);

      }
      /*创建关键帧*/
      @keyframes one{
          from{
              background-position: 0 0;
          }
          to{
              background-position: -474px 0;
          }
      }
  </style>
</head>
<body>
  <div class="box1"></div>
</body>
</html>

    三.背景

    1.背景颜色：backgroud-color

    （1）默认值为transparent，透明的

    2.背景图片：backgroud-image

    （1）可以同时设置背景颜色和背景图片
    （2）backgroud-image：后加上url（），括号内填入背景图路径，不加的话默认值为none
    （3）若背景图小于元素大小，会自动补满，用很多张该图片铺满元素
    （4）若背景图大于元素大小，超出部分将无法显示

    3.设置背景图的重复方式：backgroud-repeat属性，可选值如下：

    （1）默认值 repeat：沿着x，y轴双方向重复
    （2）repeat-x：只沿着x轴方向重复
    （3）repeat-y：只沿着y轴方向重复
    （4）no-repeat：不重复

    4.设置背景图的位置：backgroud-position属性，可选值如下：

    （1）top，bottom，left，right，center

  • 通过上面五个值控制位置

  • 必须同时指定两个值，如果只写一个，默认第二个是center
  • 指定两个值的话跟先后顺序无关
  • backgroud-position：center left；

（2）通过偏移量调节位置（水平 垂直）

  • 偏移量也要两个值，第一个值是水平偏移量和第二个值是垂直偏移量
  • 可以为负值
  • 若只指定一个偏移量，那么垂直方向默认居中
  • 背景图不指定位置默认在左上角

  • backgroud-position：20px 50px ；//就是将背景图向右移动20px，向下移动50px

    5.设置背景的范围用backgroud-clip，可选值如下：

    （1）border-box：默认值，背景会出现在边框下边
    （2）padding-box：背景不会出现在边框，只出现在内容区和内边距
    （3）content-box：背景只会出现在内容区

    6.设置背景偏移的原点位置用backgroud-origin，可选值如下：

    （1）border-box：默认值，从内边距开始计算
    （2）padding-box：从边框处开始计算
    （3）content-box：从内容区开始计算

    7.设置图片大小用backgroud-size，可选值如下：

    （1）直接填入宽度高度（px或em）：backgroud-size：100px 100px

  • 如果只写一个值，第二个值默认为auto

（2）cover：图片的比例不变，将元素铺满，但是可能有显示不出来的地方
（3）contain：图片的比例不变，将图片在元素中完全显示，可能有的地方露出来没有被背景图片覆盖

8.设置图片是否跟随元素移动用backgroud-attachment，可选值如下

（1）scroll：默认值，图片会跟随元素移动
（2）fixed：背景会固定在页面中，不跟随页面移动

9.背景的简写属性：

（1）写法：background：属性值1，属性值2…；
（2）可以声明多个属性
（3）例如：backgroud：red url(./a.jpg) center center no-repeat；
（4）注意：

  • backgroud-size必须写在backgroud-position后，且用/隔开

  • backgroud-origin必须写在backgroud-clip前面

    10.CSS-Sprite：

    （1）页面中一个图标鼠标移入点击有不同效果，用多张图片会有缓存问题，所有就把图片拼在一起，用偏移量移动实现效果，有效避免缓存，闪烁等问题，被称为CSS-Sprite，这种图叫做雪碧图
    （2）雪碧图特点：一次性将多个图片加载到页面，降低了请求的次数，加快访问速度，提升用户体验

    11.filter属性(滤镜)—图片模糊处理(需要用到js)

    （1）filter：blur(5px)
    （2）blur模糊处理，数值越大越模糊

    12.calc函数—用于计算

    （1）width：calc(100%-9px)//永远比父盒子小9像素

    四.渐变

    1.概述：

    （1）渐变：从一个颜色向其他颜色过渡的效果
    （2）渐变是一种图片，需要通过backgroud-image来设置

    2.线性渐变(linear-gradient()):颜色沿着一条直线发生变化

    （1）第一个参数设置渐变方向，可选值有：

  • to left 向左渐变

  • to right 向右渐变
  • to top 向上渐变
  • to bottom（默认值）向下渐变
  • 以上值可以组合：to left top

（2）后面的值可以同时指定多个颜色，多个颜色默认情况下平均分布
（3）还可以手动指定分布的情况 就是在颜色后边+空格+长度

  • backgroud-image：linear-gradient(red 10px，yellow 20px)；

    3.径向渐变(radial-gradient()):

    （1）径向就是从中心向四周放射
    （2）第一个值可以指定径向渐变的范围

  • backgroud-image：radial-gradient(100px 100px，red，yellow)

  • 用to+（ left top right bottom）指定渐变位置