网

网页动画介绍 CSS 动画 1. 杠铃 2. 手臂 3. 脸部 4. 身体

2025-05-28

网络动画

介绍

CSS动画

1.杠铃

2. 武器

3. 脸

4. 正文

介绍

动画在我们日常的上网过程中扮演着重要的角色。它们让用户的在线加载体验更加有趣，并激发他们的兴趣。

它们是一种强大的工具，能够有效地使在线网站对访问者更具互动性和吸引力。

“动画是赋予图像和图形对象生命的艺术”

什么是动画？

“一种将图片处理成动态图像的方法”

这篇博客，我将专注于 CSS 动画。那就让我们开始吧！

CSS动画

使用 CSS 动画，网页中的元素可以移动、旋转和变换。它们可以在页面上移动，并以各种有趣的方式进行交互。

为了更好地理解 CSS 动画，让我们了解一下什么是关键帧:)

关键帧

在动画中，“关键帧是一种定义任何平滑过渡的起点和终点的图形。”

让我们看看如何使用关键帧实现一个像样的动画，如下例所示：

为此我们需要：

  • 静态 svg 图像

替代文本

  • 还有...一点 css xD

svg 图像被分成更小的部分，每个部分被分组并赋予特定的 id，稍后将在 CSS 中使用。

替代文本

现在我们将修改代码以使我们的资产按照我们想要的方式移动！

我们将为不同部分的过渡和移动创建单独的关键帧：

1.杠铃

以下代码将有助于杠铃的垂直运动。

@keyframes barbell {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(42%);
  }
}
Enter fullscreen mode Exit fullscreen mode

animation然后通过将关键帧分配给选择器中的属性，将其集成到 svg 中的相应部分#Barbell。

#Barbell {
  width: 700px;
  height: auto;
  margin: 0;
  padding: 0;
  animation: barbell 1s ease-in-out 6 alternate;
  transform-origin: center;
  transform-box: fill-box;
}
Enter fullscreen mode Exit fullscreen mode

2. 武器

这个有点棘手，所以系好安全带 xD
为了说明手臂的弯曲运动，我们进一步将其细分为手臂和前臂对。

前臂

@keyframes foreArmLeft {
  from {
    transform: rotate(0deg) translateY(0%) translateX(0%) scaleY(1);
  }
  to {
    transform: rotate(8deg) translateY(35%) translateX(-63%) scaleY(0.65);
  }
}
Enter fullscreen mode Exit fullscreen mode

为前臂添加translate(35%)了一点垂直运动，以描绘举起杠铃的动作，而 则rotate(8deg)描绘了弯曲动作。然后将其集成到前臂选择器中，#ForeArmLeft如下所示：

#ForeArmLeft {
  animation: foreArmLeft 1s ease-in-out 6 alternate;
  transform-origin: bottom;
  transform-box: fill-box;
}
Enter fullscreen mode Exit fullscreen mode

上臂

下面的代码有助于斜向移动大脑的上臂。

@keyframes upperArmLeft{
  from {
    transform: translateY(0%) translateX(0%);
  }
  to {
    transform: translateY(270%) translateX(-60%);
  }
}
Enter fullscreen mode Exit fullscreen mode

3. 脸

以下 2 个关键帧有助于大脑快乐和悲伤情绪的转变。

@keyframes faceHappy{
  from{
    opacity: 1;
    transform: translateY(0%);
  }
  to{
    opacity: 0;
    transform: translateY(3%);
  }
}
Enter fullscreen mode Exit fullscreen mode 
@keyframes faceSad{
  from{
    opacity: 0;
    transform: translateY(0%);
  }
  to{
    opacity: 1;
    transform: translateY(3%);
  }
}
Enter fullscreen mode Exit fullscreen mode

4. 正文

使用以下代码创建身体的轻微垂直运动来表示大脑举起杠铃的努力：

@keyframes body {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(5%);
  }
}
Enter fullscreen mode Exit fullscreen mode

瞧！我们的动画已经完成了……我们来看看吧！

感谢阅读！

文章来源：https://dev.to/zenveus/web-animations-2n8a
Devto 翻译
PREV
我设计，你建造！ - 前端挑战 #1 idesignyoubuild #webdev #javascript
NEXT
实验室：SSL 如何工作？