一个html + css的例子，展现出极简艺术美：小球随着你的鼠标移动而跳动！

HTML和CSS：网页设计的基石，打造令人惊叹的网页动画

HTML与CSS简介

网页设计离不开HTML和CSS，它们是打造精美网页的基础。HTML是超文本标记语言，负责网页的结构，而CSS是层叠样式表，控制着网页的外观。

用HTML + CSS制作小球跳动动画

让我们用一个简单的小球跳动动画示例，深入了解HTML和CSS的强大功能。

HTML结构

首先，我们用HTML定义小球的容器：

<div class="container">
  <span class="ball"></span>
</div>

<div>元素作为小球容器，<span>元素表示小球本身。

CSS样式

接下来，我们使用CSS设置小球的外观和动画效果：

.container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  position: relative;
}

.ball {
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ball:hover {
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

我们用CSS的animation属性定义了名为“bounce”的动画，使其在鼠标悬停时持续跳动。

动画详解

• 0%： 小球初始状态，缩放比例为1。
• 50%： 小球放大到缩放比例1.2。
• 100%： 小球恢复到初始状态，缩放比例为1。

通过这个简单的动画，我们让小球在鼠标悬停时上下跳动。

HTML和CSS的优势

这个小球动画示例展现了HTML和CSS的强大之处：

• 结构与外观分离： HTML负责结构，CSS负责外观，这种分离便于维护和修改。
• 可重复使用： CSS样式可以跨越多个元素重用，节省代码和提高一致性。
• 动态效果： CSS动画允许创建动态和交互式的网页元素。

结论

HTML和CSS是网页设计的基石，它们赋予了我们创建精美、交互式网页的能力。通过学习和掌握这些语言，我们可以将我们的网页设计愿景变为现实。

常见问题解答

1. 如何更改小球的颜色？
在CSS中，编辑.ball选择器的background-color属性即可。

2. 如何调整小球跳动的频率？
在@keyframes bounce规则中，编辑animation-duration属性。

3. 如何让小球在加载时自动跳动？
在.ball选择器中，删除:hover条件，直接添加animation: bounce属性。

4. 如何让小球跳动得更远？
在@keyframes bounce规则中，增加50%帧的缩放比例，如transform: translate(-50%, -50%) scale(1.5);。

5. 如何为小球添加阴影？
在.ball选择器中，添加box-shadow属性，如box-shadow: 0 0 5px #000;。