分享CSS项目悬停过渡动画三部曲的实现

  
TEXT

body {
  color: white;
  font-family: Helvetica, Sans-Serif;
}

.box {
  width:200px;                 /* Set the Width of box          */
  height:50px;                 /* Set the Height of box         */
  background:#424242;          /* Dark Grey Background color    */
  transition:all 0.25s ease;   /* Transition settings           */
  display: flex;               /* Use Flexbox on P              */
  align-items: center;         /* Center P                      */
  justify-content: center;     /* Center P                      */
  margin: 10px;                /* Apply a margin around our Box */
}

  
FADE HERE

.fade:hover {
  opacity: 0.5;
}

  
COLOR HERE

同样地，我们也要借助:hover选择器来帮我们完成这件事，但是这一次我们不是改变透明度而是背景色：

.color:hover {
  background: #FF5722;
}

如下就是实际效果了：

3.一起摇摆

接下来，来实现一个摆动的效果。这个效果实现起来比前面的两个例子稍显复杂。在这个例子中，我会采用@keyframes来完成。

@keyframes——赋予你在一个CSS动画序列中控制中间步骤的魔力。

首先还是一样，你肯定已经听烦了，创建一个div元素，并未它添加一个名为wiggle的类：

  
WIGGLE WIGGLE

接下来，我们要做的就是借助@keyframes来创建动画。我们先给动画起个名字，就叫wiggle吧。并在如下的代码中添加抖动效果的实现：

@keyframes wiggle {
  20%  { transform: translateX(4px);  }
  40%  { transform: translateX(-4px); }
  60%  { transform: translateX(2px);  }
  80%  { transform: translateX(-1px); }
  100% { transform: translateX(0);    }
}

从上面的代码已经可以看出，@keyframes赋予我们将动画分解成单步，并且精确定义每一步发生了什么的能力。通过百分比的方式指定动画的进度：

• 20%——div相对于初始位置右移4px。

• 40%——div相对于初始位置左移4px。

• 60%——div相对于初始位置右移2px。

• 80%——div相对于初始位置左移1px。

• 100%——div恢复到初始位置。

现在我们就能借助:hover选择器来展示wiggle的动画了：

.wiggle:hover {
  animation: wiggle 1s ease;
  animation-iteration-count: 1;
}

我们将animation设置成wiggle。同时希望动画持续1秒的时长，采用ease的动画效果。

最后，就是指定动画在每次鼠标指针悬停的时候触发一次。

下图就是最终的动画效果：

感谢各位的阅读，以上就是“分享CSS项目悬停过渡动画三部曲的实现”的内容了，经过本文的学习后，相信大家对分享CSS项目悬停过渡动画三部曲的实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！