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

最新推荐文章于 2025-06-20 03:47:14 发布

文阿花

最新推荐文章于 2025-06-20 03:47:14 发布

阅读量839

点赞数 13

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 学习笔记

本文链接：https://blog.youkuaiyun.com/wz_1992/article/details/139119784

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;