球球跳动的魔法：用精灵活现一颗活跃的抛物线小球

让你的购物车按钮起舞：使用 CSS 和 JavaScript 创建抛物线小球特效

探索抛物线小球特效

准备好踏上一次视觉盛宴了吗？我们即将见证一颗小球在抛物线上上下飞舞，就像魔法一般。这种炫酷的特效经常用于购物车按钮，为购物体验增添一丝趣味。

布局和样式

首先，让我们为我们的按钮创建一个容器。它将有一个固定的位置，尺寸和圆角，形成一个界限明确的区域。

<div class="container">
  <button type="button" class="btn">加入购物车</button>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

.btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript 的魔力

现在，我们来让小球动起来！我们使用 JavaScript 创建一个 ball 元素，并赋予它样式，使其具有位置、大小和颜色。然后，我们将它添加到容器中。

const container = document.querySelector('.container');
const btn = document.querySelector('.btn');
const ball = document.createElement('div');

ball.classList.add('ball');
ball.style.position = 'absolute';
ball.style.top = '0';
ball.style.left = '0';
ball.style.width = '20px';
ball.style.height = '20px';
ball.style.borderRadius = '50%';
ball.style.backgroundColor = 'red';

container.appendChild(ball);

CSS 动画

接下来，我们使用 CSS 动画让小球在抛物线上弹跳。我们定义一个名为 jump 的关键帧动画，使小球从顶部向上移动，然后向右和向下移动，最后回到初始位置。

@keyframes jump {
  0% {
    top: 0;
    left: 0;
  }
  50% {
    top: -100px;
    left: 100px;
  }
  100% {
    top: 0;
    left: 0;
  }
}

触发动画

最后，我们使用 JavaScript 在点击按钮时触发动画。

btn.addEventListener('click', () => {
  ball.style.animation = 'jump 2s ease-in-out infinite';
});

优化

你可以发挥你的创造力，进一步优化这个特效。改变小球的颜色、大小或添加旋转效果。让你的小球自由飞翔吧！

结论

使用 CSS 和 JavaScript，我们创建了一个引人入胜的抛物线小球特效。它将为你的购物车按钮增添一丝动感和趣味性，让购物体验更加难忘。

常见问题解答

• 如何改变小球的颜色？
  编辑 ball 元素的 backgroundColor 样式属性。

• 如何让小球跳得更高？
  修改 @keyframes jump 动画中的 top 值以增加小球向上移动的距离。

• 如何让小球旋转？
  添加 transform: rotate(360deg) 属性到 ball 元素的样式中，并指定一个持续时间和一个缓动函数。

• 如何让小球无限期地跳动？
  在 ball 元素的 style.animation 属性中使用 infinite 值。

• 如何让小球跟随鼠标移动？
  使用 mousemove 事件侦听器和 ball.style.left 和 ball.style.top 属性来跟踪鼠标位置并相应地更新小球的位置。