入门 CSS 悬停动画

CSS 悬停动画可以为网页带来更加生动、有趣的交互效果。在这篇文章中，我们将介绍入门级别的 CSS 悬停动画，让你能够在网页开发中运用它们。

基础概念

在开始编写 CSS 悬停动画之前，我们需要先了解一些基础概念。下面是一些常用的 CSS 属性，它们可以用来创建动画效果：

• transition: 设置元素的过渡效果
• transform: 改变元素的形状、尺寸、位置等
• animation: 创建一个动画效果
• keyframes: 定义动画中不同的阶段

这些属性常用于悬停动画的编写，我们将在后面的例子中进行实践。

实例演示

接下来我们将通过几个实例演示 CSS 悬停动画的编写。

翻转动画

首先，让我们来编写一个简单的旋转动画。在鼠标悬浮在元素上时，元素会以翻转的形式显示。

<div class="flip-card">
   <div class="flip-card-inner">
      <div class="flip-card-front">
         <img src="front.png">
      </div>
      <div class="flip-card-back">
         <img src="back.png">
      </div>
   </div>
</div>

/* 实现翻转效果 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

这段代码实现了一个带有翻转效果的卡片。当鼠标悬浮在卡片上时，卡片会翻转并显示背面图像。

放大动画

我们也可以使用 CSS 的 transform 属性来实现放大效果。例如，当鼠标悬浮在一个图像上时，它会逐渐放大。

<img src="image.png" class="zoom">

/* 实现放大效果 */
.zoom {
  transition: transform .2s;
}

.zoom:hover {
  transform: scale(1.5);
}

这段代码实现了一个简单的图像放大动画。当鼠标悬浮在图像上时，它会逐渐放大到原来的1.5倍。

阴影动画

我们还可以使用 CSS 的 box-shadow 属性来创建阴影效果。例如，当鼠标悬浮在图像上时，会出现较大的阴影。

<img src="image.png" class="shadow">

/* 实现阴影效果 */
.shadow {
  transition: box-shadow .2s;
}

.shadow:hover {
  box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}

这段代码实现了一个简单的阴影效果。当鼠标悬浮在图像上时，它会出现一个较大的阴影，使得图像看起来更加突出。

总结

在这篇文章中，我们学习了 CSS 悬停动画的基础概念以及实现方法，并编写了几个简单的实例。通过学习这些，你可以为你的网页带来更加生动、有趣的交互效果。