CSS学习笔记之高级教程（二）

10、CSS 3D 转换

通过 CSS transform 属性，您可以使用以下 3D 转换方法：

rotateX()
rotateY()
rotateZ()

10.1 rotateX() 方法（使元素绕其 X 轴旋转给定角度）

<!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>

    /* div{
      position: absolute;
    } */
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: #F0AAAE;
      border: 1px solid black;
    }

    div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateX(50deg);
    }
  </style>
</head>

<body>

   <div>
    <div class="ex1"></div>
    <div class="ex2"></div>
   </div>
</body>

</html>

运行效果：
在这里插入图片描述

10.2 rotateY() 方法（使元素绕其 Y 轴旋转给定角度）

div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateY(50deg);
    }

10.3 rotateZ() 方法（方法使元素绕其 Z 轴旋转给定角度）

div.ex2 {
      width: 200px;
      height: 200px;
      background-color: #E45664;
      border: 1px solid black;
      transform: rotateZ(50deg);
    }

11、CSS 过渡

CSS 过渡允许您在给定的时间内平滑地改变属性值。

如需创建过渡效果，必须明确两件事：

您要添加效果的 CSS 属性
效果的持续时间

在这里插入图片描述

示例：

transition: width 2s,height 2s;
transition: width 2s;

<!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>

    /* div{
      position: absolute;
    } */
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: #F0AAAE;
      border: 1px solid black;
      transition: width 2s;
    }

    div.ex1:hover{
      width: 400px;
    }

   
  </style>
</head>

<body>

   <div>
    <div class="ex1"></div>
   </div>
</body>

</html>

运行效果：
鼠标放置元素上后，元素宽度会从200px 平滑增加到 400px,动画效果持续2秒钟

11.2 `transition-timing-function`（规定过渡效果的速度曲线）

transition-timing-function 属性可接受以下值：

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

11.3 `transition-delay` （规定过渡效果的延迟（以秒计））。

div {
  transition-delay: 1s;
}

11.4 过渡 + 转换

div {
  transition: width 2s, height 2s, transform 2s;
}

11.5 简写的 `transition` 属性

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

可简写为：

div {
  transition: width 2s linear 1s;
}

12、CSS 动画

12.1 `@keyframes` 规则

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。

要使动画生效，必须将动画绑定到某个元素。

animation-duration 属性定义需要多长时间才能完成动画。如果未指定 animation-duration 属性，则动画不会发生，因为默认值是 0s（0秒）。

12.2 `from、to`关键词使用：

下面的例子将 “example” 动画绑定到 <div> 元素。动画将持续 4 秒钟，同时将 <div> 元素的背景颜色从 “red” 逐渐改为 “yellow”：

<!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>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
    }

    @keyframes example {
      from {
        background-color: red;
      }

      to {
        background-color: yellow;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.3 动画完成度（百分制）：

<!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>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
    }

    @keyframes example {

      0% {
        background-color: red;
      }

      25% {
        background-color: yellow;
      }

      50% {
        background-color: blue;
      }

      100% {
        background-color: green;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.3 延迟动画：`animation-delay`

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

<!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>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-delay: 1s;
    }

    @keyframes example {

      0% {
        background-color: red;
      }

      25% {
        background-color: yellow;
      }

      50% {
        background-color: blue;
      }

      100% {
        background-color: green;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.4 设置动画应运行多少次：`animation-iteration-count`

使用值 “infinite” 使动画永远持续下去

<!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>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      animation-name: example;
      animation-duration: 4s;
      animation-delay: 1s;
      /* 动画运行次数 */
      animation-iteration-count:3
    }

    @keyframes example {

      0% {
        background-color: red;
      }

      25% {
        background-color: yellow;
      }

      50% {
        background-color: blue;
      }

      100% {
        background-color: green;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.5 反向或交替运行动画:`animation-direction`

animation-direction 属性可接受以下值：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

<!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>
    div.ex1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: relative;
      animation-name: example;
      animation-duration: 4s;
      animation-timing-function:ease;
      animation-iteration-count: 2;
      /* 动画以反方向播放（向后） */
      animation-duration: reverse;
    }

    @keyframes example {

      0% {
        background-color: red;
        left: 0;
        top: 0;
      }

      25% {
        background-color: yellow;
        left: 200px;
        top: 0;
      }

      50% {
        background-color: blue;
        left: 200px;
        top: 200px;
      }

      100% {
        background-color: green;
        left: 0px;
        top: 200px;
      }
    }
  </style>
</head>

<body>

  <div>
    <div class="ex1"></div>
  </div>
</body>

</html>

12.6 指定动画的速度曲线:`animation-timing-function`

animation-timing-function 属性可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

12.7 指定动画的填充模式：`animation-fill-mode`

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

12.8 动画简写属性

  div {
        /* 动画名称 */
        animation-name: example;
        /* 动画执行时间 */
        animation-duration: 5s;
        /* 指定动画的速度曲线-规定从开始到结束的速度相同的动画 */
        animation-timing-function: linear;
        /* 延迟多久后执行动画 */
        animation-delay: 2s;
        /* 执行动画次数：循环 */
        animation-iteration-count: infinite;
        /* 反向或交替运行动画：动画先向前播放，然后向后 */
        animation-direction: alternate;
      }

简写为：

div {
  animation: example 5s linear 2s infinite alternate;
}

在这里插入图片描述

13、CSS 工具提示

通过 CSS 创建工具提示（Tooltip）。

13.1 基础的工具提示

创建一个鼠标移到元素上时显示的工具提示：

<!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>
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
    }

    .tooltiptext {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
  </style>
</head>

<body>

  <div class="tooltip">鼠标移到我上面
    <span class="tooltiptext">提示文字</span>
  </div>

</body>

</html>

13.2 定位工具提示

右侧工具提示：

.tooltip .tooltiptext {
  top: -5px;
  left: 105%; 
}

左侧工具提示：

.tooltip .tooltiptext {
  top: -5px;
  right: 105%; 
}

顶部工具提示：

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

底部工具提示：

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

示例：

<!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>
    .tooltip {
      position: relative;
      display: inline-block;
      background-color: rgb(107, 119, 189);
      padding: 15px 25px;
      color: white;
      border-radius: 5px;
      margin-left: 200px;
      margin-top: 100px;
    }

    .tooltiptext-top {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      bottom: 105%;
      left: -30px;
    }

    .tooltip:hover .tooltiptext-top {
      visibility: visible;
    }

    .tooltiptext-left {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      right: 105%;
      top: 50%;
      transform: translateY(-50%);
    }

    .tooltip:hover .tooltiptext-left {
      visibility: visible;
    }

    .tooltiptext-right {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      left: 105%;
      top: 50%;
      transform: translateY(-50%);
    }

    .tooltip:hover .tooltiptext-right {
      visibility: visible;
    }

    .tooltiptext-bottom {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      top: 105%;
      left: 50%;
      transform: translateX(-50%);
    }

    .tooltip:hover .tooltiptext-bottom {
      visibility: visible;
    }
  </style>
</head>

<body>

  <div>
    <div class="tooltip">Top
      <div class="tooltiptext-top">顶部提示</div>

    </div>
    <div class="tooltip">Left
      <div class="tooltiptext-left">左部提示</div>
    </div>
    <div class="tooltip">Right
      <div class="tooltiptext-right">右部提示</div>
    </div>
    <div class="tooltip">Bottom
      <div class="tooltiptext-bottom">底部提示</div>
    </div>
  </div>


</body>

</html>

13.4 工具提示箭头

思路：使用伪元素：::after 伪元素（伪元素可用于在元素内容之后插入一些内容）
顶部提示增加箭头示例（关键点：border-color: black transparent transparent transparent;）：

<!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>
    .tooltip {
      position: relative;
      display: inline-block;
      background-color: rgb(107, 119, 189);
      padding: 15px 25px;
      color: white;
      border-radius: 5px;
      margin-left: 200px;
      margin-top: 100px;
    }

    .tooltiptext-top {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      bottom: 105%;
      left: -30px;
    }

    .tooltip:hover .tooltiptext-top {
      visibility: visible;
    }

    /* 使用伪元素添加箭头内容 */
    .tooltiptext-top::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      border-width: 5px;
      border-style: solid;
      border-color: black;
      margin-left: -5px;
      border-color: black transparent transparent transparent;
    }
  </style>
</head>

<body>

  <div>
    <div class="tooltip">Top
      <div class="tooltiptext-top">顶部提示</div>
    </div>
  </div>


</body>

</html>

左部提示增加箭头示例（关键点：border-color: transparent black transparent transparent;）
右部提示增加箭头示例（关键点： border-color: transparent transparent transparent black;）
底部提示增加箭头示例（关键点： border-color: transparent transparent black transparent ;）

13.5 淡入的工具提示（动画）

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}

示例：

<!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>
    .tooltip {
      position: relative;
      display: inline-block;
      background-color: rgb(107, 119, 189);
      padding: 15px 25px;
      color: white;
      border-radius: 5px;
      margin-left: 200px;
      margin-top: 100px;
    }

    .tooltiptext-top {
      position: absolute;
      width: 120px;
      background-color: black;
      opacity: 0.9;
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      visibility: hidden;
      bottom: 105%;
      left: -30px;
      /* 增加淡入动画 */
      opacity: 0;
      transition: opacity 1s;
    }

    .tooltip:hover .tooltiptext-top {
      visibility: visible;
      opacity: 1;
    }

    /* 使用伪元素添加箭头内容 */
    .tooltiptext-top::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      border-width: 5px;
      border-style: solid;
      border-color: black;
      margin-left: -5px;
      border-color: black transparent transparent transparent;
    }
  </style>
</head>

<body>

  <div>
    <div class="tooltip">Top
      <div class="tooltiptext-top">顶部提示</div>
    </div>
  </div>


</body>

</html>