cococs 礼盒抖动动画

要实现礼盒抖动动画可以使用 CSS3 的动画特性。可以定义一个 `@keyframes` 规则，然后将该规则应用到礼盒的 CSS 样式中。

具体实现方法如下：

1. 首先定义 `@keyframes` 规则：

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

在上面的代码中，定义了一个名为 `shake` 的 `@keyframes` 规则，其中包含了一些关键帧，每个关键帧都定义了礼盒的 transform 属性。

2. 接着，在礼盒的 CSS 样式中应用 `shake` 规则：

.gift-box {
  animation: shake 0.5s ease-in-out infinite;
}

在上面的代码中，将 `shake` 规则应用到了 `.gift-box` 元素上，其中 `animation` 属性指定了动画名称、持续时间、缓动函数和动画播放次数。

这样就可以实现礼盒抖动动画了。

相关问题

力扣题礼盒的最大天密度的函数曲线

力扣题礼盒的最大天密度问题可以转化为一个函数 f(x) 的形式，其中 f(x) 表示 "礼盒中最大天数不超过 x" 这个条件下的天密度。

具体地，对于一个给定的天数 x，我们可以使用贪心算法来判断在不超过 x 的情况下，最多能拿到多少天的礼盒。假设当前已经拿到了 k 个礼盒，其天数分别为 d1, d2, ..., dk，且满足 d1 <= d2 <= ... <= dk。此时，我们可以从剩余的礼盒中选择一个最小的天数大于 dk 的礼盒，加入到已拿到的礼盒中，直到不能再加入礼盒为止。这个贪心算法的时间复杂度是 O(nlogn)，其中 n 是礼盒的数量。

对于一个给定的天数 x，如果能拿到的最多天数不超过 x，则 f(x) 为 true，否则 f(x) 为 false。这个函数的曲线是一个阶梯状的函数，如下图所示：

        |
        |   |
        |   |   |
        |   |   |   |
        |___|___|___|___
            x1  x2  x3  x4

其中，每个竖直的线段表示一个礼盒，x1、x2、x3、x4 分别表示四个礼盒的最大天数，每个水平的线段表示函数值为 true 的区间。例如，当 x 取值在 [x3, x4] 区间内时，f(x) 的值都为 true，因为在不超过 x3 的情况下，最多能拿到的天数为 3+4+4=11，不超过 x4 的限制。

我们要找到的最大的天密度，就是最后一个函数值为 true 的点所对应的 x 值，即 x4。这个问题可以通过二分查找法解决，每次取中间值，判断中间值是否满足条件，然后不断缩小搜索区间，最终找到最大的 x 值。

给你一个正整数数组 price ，其中 price[i] 表示第 i 类糖果的价格，另给你一个正整数 k 。 商店组合 k 类 不同 糖果打包成礼盒出售。礼盒的 甜蜜度 是礼盒中任意两种糖果 价格 绝对差的最小值。 返回礼盒的 最大 甜蜜度

这是一个经典的二分答案问题。首先可以想到甜蜜度的上限为 max(price)-min(price)，因为任意两个数的差值不可能超过这个范围。

然后我们可以考虑二分答案，假设当前二分到的甜蜜度为 mid，那么我们需要判断能否用 k 个礼盒将所有糖果都包装起来，使得每个礼盒内任意两个糖果的价格差不超过 mid。

这个问题可以使用贪心算法来解决。我们首先将价格数组按照从小到大排序，然后从前往后遍历。对于当前遍历到的糖果，我们尝试将其放入前面已经放置好的礼盒中，如果能够放入一个礼盒中使得这个礼盒内任意两个糖果的价格差不超过 mid，那么就将其放入该礼盒中。否则，我们就新开一个礼盒，并将当前糖果放入其中。

如果最终使用的礼盒数量不超过 k，那么说明当前的 mid 是可行的，我们可以继续尝试使用更大的 mid。否则，说明当前的 mid 不可行，我们需要尝试使用更小的 mid。

时间复杂度为 O(nlogn * log(max(price)-min(price)))。