CSS3学习教程，从入门到精通，CSS3 动画美化页面知识点及案例代码（19）

CSS3 动画美化页面知识点及案例代码

一、CSS3 动画基础

CSS3 动画是通过一系列的 CSS 样式变化来实现的，这些变化可以在一定的时间内逐步完成，从而产生动画效果。CSS3 动画主要通过@keyframes规则和animation属性来实现。

1. @keyframes 规则

@keyframes规则用于定义动画的关键帧，即动画在不同时间点的状态。其语法如下：

css 复制代码

@keyframes 动画名称 {
  from { /* 动画开始时的样式 */
    /* CSS 属性 */
  }
  to { /* 动画结束时的样式 */
    /* CSS 属性 */
  }
}

或者可以使用百分比来定义多个关键帧：

css 复制代码

@keyframes 动画名称 {
  0% { /* 动画开始时的样式 */
    /* CSS 属性 */
  }
  50% { /* 动画中间某个时间点的样式 */
    /* CSS 属性 */
  }
  100% { /* 动画结束时的样式 */
    /* CSS 属性 */
  }
}

2. animation 属性

animation属性用于将动画应用到元素上，它是一个复合属性，可以设置以下子属性：

animation-name：指定动画的名称，即@keyframes规则定义的动画名称。
animation-duration：指定动画的持续时间，单位为秒（s）或毫秒（ms）。
animation-timing-function：指定动画的速度曲线，如linear（线性）、ease（缓入缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）、cubic-bezier()（自定义贝塞尔曲线）等。
animation-delay：指定动画的延迟时间，单位为秒（s）或毫秒（ms），可以是负值。
animation-iteration-count：指定动画的播放次数，可以是具体的数字，infinite表示无限次播放。
animation-direction：指定动画的方向，如normal（正常）、reverse（反转）、alternate（交替）、alternate-reverse（交替反转）。
animation-fill-mode：指定动画结束后元素的样式如何填充，如none（默认，不填充）、forwards（保持动画结束时的样式）、backwards（保持动画开始时的样式）、both（结合forwards和backwards）。
animation-play-state：指定动画的状态，如running（播放）、paused（暂停）。

二、CSS3 动画案例代码

案例一：简单的淡入淡出动画

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单的淡入淡出动画</title>
  <style>
    /* 定义动画关键帧 */
    @keyframes fadeInOut {
      0% {
        opacity: 0; /* 初始透明度为0 */
      }
      50% {
        opacity: 1; /* 中间透明度为1 */
      }
      100% {
        opacity: 0; /* 结束透明度为0 */
      }
    }

    /* 应用动画到元素 */
    .fade-box {
      width: 100px;
      height: 100px;
      background-color: #ff5722;
      margin: 50px auto;
      /* 设置动画属性 */
      animation-name: fadeInOut;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <div class="fade-box"></div>
</body>
</html>

案例二：旋转动画

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旋转动画</title>
  <style>
    /* 定义旋转动画关键帧 */
    @keyframes rotate {
      0% {
        transform: rotate(0deg); /* 初始旋转角度为0度 */
      }
      100% {
        transform: rotate(360deg); /* 结束旋转角度为360度 */
      }
    }

    /* 应用旋转动画到元素 */
    .rotate-box {
      width: 100px;
      height: 100px;
      background-color: #4caf50;
      margin: 50px auto;
      /* 设置动画属性 */
      animation-name: rotate;
      animation-duration: 2s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <div class="rotate-box"></div>
</body>
</html>

案例三：弹跳动画

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹跳动画</title>
  <style>
    /* 定义弹跳动画关键帧 */
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0); /* 初始和结束位置在顶部 */
        animation-timing-function: ease-in;
      }
      50% {
        transform: translateY(-50px); /* 中间位置向上移动50px */
        animation-timing-function: ease-out;
      }
    }

    /* 应用弹跳动画到元素 */
    .bounce-box {
      width: 100px;
      height: 100px;
      background-color: #2196f3;
      margin: 50px auto;
      /* 设置动画属性 */
      animation-name: bounce;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <div class="bounce-box"></div>
</body>
</html>

案例四：组合动画

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组合动画</title>
  <style>
    /* 定义组合动画关键帧 */
    @keyframes combo {
      0% {
        transform: translateX(-100px) rotate(0deg); /* 初始位置在左边100px，旋转0度 */
        opacity: 0; /* 初始透明度为0 */
      }
      50% {
        transform: translateX(0) rotate(180deg); /* 中间位置在原点，旋转180度 */
        opacity: 1; /* 中间透明度为1 */
      }
      100% {
        transform: translateX(100px) rotate(360deg); /* 结束位置在右边100px，旋转360度 */
        opacity: 0; /* 结束透明度为0 */
      }
    }

    /* 应用组合动画到元素 */
    .combo-box {
      width: 100px;
      height: 100px;
      background-color: #ff9800;
      margin: 50px auto;
      /* 设置动画属性 */
      animation-name: combo;
      animation-duration: 3s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
  </style>
</head>
<body>
  <div class="combo-box"></div>
</body>
</html>

三、总结

通过以上案例，我们学习了如何使用 CSS3 动画来美化页面。CSS3 动画不仅可以实现简单的淡入淡出、旋转、弹跳等效果，还可以通过组合多个动画属性实现更复杂的动画效果。在实际开发中，我们可以根据需求灵活运用这些动画效果，提升页面的视觉体验和用户交互性。

以下是开发中常用的CSS3动画实际具体案例，包含HTML和CSS代码，并有详细注释：

案例一：图片轮播

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 图片轮播</title>
  <style>
    /* 轮播容器样式 */
    .slideshow {
      width: 500px;
      height: 300px;
      margin: 50px auto;
      position: relative;
      overflow: hidden;
    }

    /* 图片样式 */
    .slideshow img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    /* 定义动画关键帧 */
    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /* 应用动画到图片 */
    .slideshow img:first-child {
      animation: fadeIn 1s ease-in-out 0s 1 forwards;
    }

    .slideshow img:nth-child(2) {
      animation: fadeIn 1s ease-in-out 3s 1 forwards;
    }

    .slideshow img:nth-child(3) {
      animation: fadeIn 1s ease-in-out 6s 1 forwards;
    }

    .slideshow img:nth-child(4) {
      animation: fadeIn 1s ease-in-out 9s 1 forwards;
    }
  </style>
</head>
<body>
  <div class="slideshow">
    <img src="image1.jpg" alt="图片1">
    <img src="image2.jpg" alt="图片2">
    <img src="image3.jpg" alt="图片3">
    <img src="image4.jpg" alt="图片4">
  </div>
</body>
</html>

案例二：菜单动画

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 菜单动画</title>
  <style>
    /* 菜单容器样式 */
    .menu {
      width: 200px;
      margin: 50px auto;
    }

    /* 菜单项样式 */
    .menu-item {
      padding: 10px;
      margin: 5px 0;
      background-color: #f0f0f0;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* 定义动画关键帧 */
    @keyframes slideIn {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* 应用动画到菜单项 */
    .menu-item:first-child {
      animation: slideIn 0.5s ease-out 0s 1 forwards;
    }

    .menu-item:nth-child(2) {
      animation: slideIn 0.5s ease-out 0.2s 1 forwards;
    }

    .menu-item:nth-child(3) {
      animation: slideIn 0.5s ease-out 0.4s 1 forwards;
    }

    .menu-item:nth-child(4) {
      animation: slideIn 0.5s ease-out 0.6s 1 forwards;
    }

    /* 菜单项悬停效果 */
    .menu-item:hover {
      background-color: #e0e0e0;
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <div class="menu">
    <div class="menu-item">首页</div>
    <div class="menu-item">关于我们</div>
    <div class="menu-item">产品展示</div>
    <div class="menu-item">联系我们</div>
  </div>
</body>
</html>

案例三：按钮动画

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 按钮动画</title>
  <style>
    /* 按钮容器样式 */
    .button-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    /* 按钮样式 */
    .button {
      padding: 15px 30px;
      margin: 0 10px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* 定义动画关键帧 */
    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }

    /* 应用动画到按钮 */
    .button {
      animation: pulse 2s infinite;
    }

    /* 按钮悬停效果 */
    .button:hover {
      background-color: #388e3c;
      transform: scale(1.05);
    }

    /* 不同类型的按钮动画 */
    .button-rotate {
      animation: rotate 1s ease-out forwards;
    }

    .button-scale {
      animation: scale 1s ease-out forwards;
    }

    /* 定义旋转动画 */
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    /* 定义缩放动画 */
    @keyframes scale {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(1.2);
      }
    }
  </style>
</head>
<body>
  <div class="button-container">
    <button class="button">脉冲按钮</button>
    <button class="button button-rotate">旋转按钮</button>
    <button class="button button-scale">缩放按钮</button>
  </div>
</body>
</html>

案例四：加载动画

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 加载动画</title>
  <style>
    /* 加载容器样式 */
    .loader-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    /* 加载动画样式 */
    .loader {
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    /* 定义旋转动画 */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="loader-container">
    <div class="loader"></div>
  </div>
</body>
</html>

以上案例展示了CSS3动画在实际开发中的一些常见应用，包括图片轮播、菜单动画、按钮动画和加载动画等，通过这些案例可以更好地理解和运用CSS3动画来美化页面。