如何用纯CSS创建CSS3弹跳效果

纯CSS创建CSS3弹跳效果可以通过使用CSS3的动画属性来实现。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.bouncing-ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  animation: bounce 1s infinite;
}
</style>
</head>
<body>
<div class="bouncing-ball"></div>
</body>
</html>

这段代码使用了@keyframes定义了一个名为bounce的动画，通过设置关键帧的样式来实现弹跳效果。然后，通过.bouncing-ball类来应用这个动画，并设置了一些基本样式，如宽度、高度、背景颜色等。

这个弹跳效果的动画是无限循环的，持续时间为1秒。在动画中，小球会在垂直方向上进行弹跳，通过transform属性的translateY函数来实现位置的变化。

这个弹跳效果可以应用在各种需要吸引用户注意力的场景，比如加载动画、按钮点击效果等。

腾讯云相关产品和产品介绍链接地址：