[分享]css制作鼠标滑动动画

CSS是一种非常适合用来制作动画效果的语言，鼠标滑动动画也常常用到。下面我们来看看如何利用CSS制作一个鼠标滑动动画。/ 代码开始 / .container { : relative; width: ...

CSS是一种非常适合用来制作动画效果的语言，鼠标滑动动画也常常用到。下面我们来看看如何利用CSS制作一个鼠标滑动动画。

/* 代码开始 */
.container {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #f00;
  transition: all .5s ease;
}
.box:hover {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 0 20px #666;
}
/* 代码结束 */ 

在这段代码中，我们先定义了一个容器，容器里包含一个作为动画对象的盒子。容器需要定位，盒子需要绝对定位，同时使用了transform属性让盒子居中。我们还设置了一个过渡效果，它将在1秒钟内缓慢变化。这里我们使用的是hover伪类，表示鼠标在盒子上悬停时的状态，并且定义了一个新的transform属性，表示盒子在悬停状态下的位置和大小。

设置box-shadow属性，可以在悬停时添加一个浅色边框，为盒子增加一些深度感。这些简单的CSS属性组合，就可以制作一个非常酷炫的鼠标滑动动画了。