CSS 过渡和动画-css教程-PHP中文网

CSS 过渡和动画

WBOY

发布： 2024-09-05 06:50:43

原创

390 人浏览过

CSS Transitions and Animations

第 7 讲：CSS 过渡和动画

在本次讲座中，我们将探索如何使用 CSS 过渡和动画让您的网页栩栩如生。这些技术允许您创建流畅、引人入胜的效果，从而增强用户体验，而无需 JavaScript。

CSS 过渡简介

CSS 过渡使您能够在指定的持续时间内平滑地更改属性值。它们非常适合创建悬停效果、按钮动画和其他交互元素。

1.基本语法

要创建过渡，您需要指定要过渡的 CSS 属性、持续时间和可选的缓动函数。

示例：

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

登录后复制

在此示例中，悬停时按钮的背景颜色会在 0.3 秒内平滑变化。

2.转换多个属性

您可以通过用逗号分隔多个属性来一次转换它们。

示例：

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

登录后复制

此示例在悬停时平滑地更改框的宽度、高度和背景颜色。

3.缓动函数

缓动函数控制不同点的过渡速度，创建缓入、缓出或两者兼而有之的效果。

常见缓动函数：
- ease：缓慢开始，然后加速，然后再次减速。
- 线性：保持恒定速度。
- Easy-in：缓慢开始，然后加速。
- 缓出：快速开始，然后减慢。

CSS 动画简介

CSS 动画允许您随着时间的推移创建更复杂的变化序列，而不仅仅是简单的过渡。您可以为多个属性设置动画、控制时间并创建关键帧以实现更好的控制。

1.基本语法

要创建动画，请定义关键帧并使用动画属性将它们应用到元素。

示例：

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

登录后复制

在此示例中：

@keyframes 规则定义动画步骤，更改背景颜色和位置。
.animate-box 类应用动画，该动画运行 5 秒并无限重复。

2.控制动画时间

您可以控制动画的时间、延迟和迭代次数。

示例：

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

登录后复制

5s：动画的持续时间。
escape-in-out：缓动功能。
1s：动画开始前的延迟。
3：动画将重复三遍。
交替：动画将在每次迭代时反转方向。

3.结合过渡和动画

您可以结合使用转场和动画来创建更多动态效果。

示例：

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

登录后复制

这个例子：

.button 类使用过渡来在悬停时稍微缩放按钮。
.pulse-button 类使用动画来创建连续的脉冲效果。

实际示例：

让我们结合过渡和动画来创建一个响应式、交互式按钮。

HTML：

<button class="animated-button">Hover Me!</button>

登录后复制

CSS：

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

登录后复制

在此示例中：