颤动向容器添加阴影

在网页设计中，容器阴影是一种常用的效果，可以使页面看起来更加立体和有层次感。而将阴影和颤动结合起来，更可以增加用户的交互体验。

实现方法

在CSS中，我们可以使用box-shadow属性来为容器添加阴影效果。同时，通过添加动画效果来实现颤动的效果。

以下是一个根据鼠标位置而导致容器颤动的例子：

.container {
  width: 200px;
  height: 200px;
  background-color: #f5f5f5;
  border-radius: 5px;
  transition: all .2s ease-in-out;
  position: relative;
  perspective: 1000px;
}

.container:hover {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
  transform: translate3d(-5px, -5px, 0);
}

通过将容器的perspective属性设置为非0值，使得容器能够应用3D效果。

由于鼠标离开容器后，容器需要恢复原来的位置，因此需要使用transition属性进行过渡动画。

结语

通过将阴影和动画效果结合起来，可以让网页看起来更加丰富和动感。同时，这种效果对于用户的交互体验也会产生积极的影响。