[分享]css3宝箱抖动效果

CSS3宝箱抖动效果是指使用CSS3动画技术来实现宝箱抖动的效果，让使用者更加有趣的互动和体验。下面是CSS3宝箱抖动效果的实现代码：.box { : relative; width: 100px; ...

CSS3宝箱抖动效果是指使用CSS3动画技术来实现宝箱抖动的效果，让使用者更加有趣的互动和体验。下面是CSS3宝箱抖动效果的实现代码：

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 50px auto;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.box:before {
  position: absolute;
  top: 10px;
  left: 10px;
  content: "";
  width: 80px;
  height: 80px;
  border: 5px solid #d9b44a;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  transform: rotate(45deg);
}
.box:after {
  position: absolute;
  top: -15px;
  left: -15px;
  content: "";
  width: 100%;
  height: 100%;
  border: 5px solid #ddd;
  border-radius: 10px;
}
.box:hover:before {
  animation: shake 0.5s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(45deg); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 0) rotate(45deg); }
  20%, 40%, 60%, 80% { transform: translate(10px, 0) rotate(45deg); }
} 

代码解析：

首先，我们定义一个.box的样式，其中包含了一个伪元素:before用来绘制宝箱上面的子弹形状，另一个伪元素:after用来绘制整个宝箱的边框。在:hover状态下，我们定义了shake动画效果，通过关键帧来实现宝箱抖动的效果。

通过这样的方式，我们可以轻松地实现CSS3宝箱抖动的效果，为用户带来更加有趣的体验。现在让我们动手实践吧！