CSS呼吸效果实现，让你的网页元素动起来！

2023-08-11 20:04:22

使用 CSS 轻松实现呼吸效果：让您的网页元素栩栩如生

导语

在当今以视觉体验为导向的数字世界中，动效已成为网页设计的关键元素。CSS 呼吸效果就是一种流行的动效技术，它可以为您的网页元素注入活力，提升用户体验。本文将深入探讨如何使用 CSS animation 和 transform: scale 属性轻松实现令人着迷的呼吸效果。

步骤 1：准备 HTML 结构

首先，您需要为要添加呼吸效果的元素创建 HTML 结构。例如，以下代码创建了一个简单的 div 元素：

<div id="box"></div>

步骤 2：添加 CSS 样式

接下来，让我们为 div 元素添加 CSS 样式，包括初始样式和动画样式。初始样式定义元素的默认外观，而动画样式定义元素在动画过程中的变化。

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

#box:hover {
  animation: breath 1s infinite alternate;
}

@keyframes breath {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

初始样式：

宽度：100px
高度：100px
背景色：红色

动画样式：

动画名称：breath
动画持续时间：1 秒
动画循环：无限
动画方向：交替变化（放大缩小交替）

关键帧定义了动画的阶段：

0%： 元素保持原始大小
50%： 元素放大 10%
100%： 元素恢复到原始大小

效果展示

将以下代码添加到 HTML 文档的 head 部分，然后在浏览器中打开该文档：

<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  #box:hover {
    animation: breath 1s infinite alternate;
  }

  @keyframes breath {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>