送给CSS初学者的悬停过渡动画三部曲

jsliang 发布于2019-08-02 16:14 / 1793人阅读

摘要：最后，将动画函数选为。的表现状态就是起止过程比较缓慢，中间过渡迅速。褪色效果首先，添加一个褪色的过渡。通过百分比的方式指定动画的进度相对于初始位置右移。同时希望动画持续秒的时长，采用的动画效果。

CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。

如下是我们将在本教程中构建的代码

项目设置

在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单：


  TEXT

CSS代码也一样简单。我们想要使用无衬线字体，并确保div中的段落文本是白色的，可以通过如下代码来实现：

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

另外，给box元素添加如下CSS属性：

.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 */
}

无论你对CSS的过渡属性熟悉与否，我们在这里都来简要介绍一下，一共分为三步。.第一步，我们需要将它应用到all变化的属性。接下来，设置过渡时长为0.25秒。最后，将动画函数选为ease。ease的表现状态就是起止过程比较缓慢，中间过渡迅速。

holly high! 目前准备工作都已经就绪，接下来就是添加过渡效果了。到目前为止，div看起来应该像下面这样。

褪色效果

首先，添加一个褪色的过渡。新建一个div元素，并为它添加一个名为fade的类：


  FADE HERE

接下来我们所需要做的就是为这个fade类指定悬停规则。我们需要借助CSS伪类选择器:hover来完成这件事情。这个伪类选择器对所有的元素都有效，并且会在元素处于鼠标指针悬停状态下的时候激活CSS声明。基于此，我们借助:hover选择器将div的透明度改为0.5：

.fade:hover {
  opacity: 0.5;
}

简单吧。上面这句CSS声明就为div指定了一个悬停效果。如下就是目前它展现的样子。而你之所以能够看到过渡样式，是因为我们一开始在名为box的类中使用了transition:all 0.25s ease;的声明。看下面，是不是一个还不错的褪色效果：

来点颜色看看

指定一个变色过渡其实和褪色过渡的过程异曲同工。首先，创建一个div元素，并为它添加一个名为color的类。


  COLOR HERE

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

.color:hover {
  background: #FF5722;
}

如下就是实际效果了：

一起摇摆

接下来，来实现一个摆动的效果。这个效果实现起来比前面的两个例子稍显复杂。在这个例子中，我会采用@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技术可以关注我的博客：CODECOLOR

云服务器 GPU云服务器翻转过渡动画 ios过渡动画 jquery过渡动画 css过渡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54937.html

送给CSS初学者的悬停过渡动画三部曲

摘要：最后，将动画函数选为。的表现状态就是起止过程比较缓慢，中间过渡迅速。褪色效果首先，添加一个褪色的过渡。通过百分比的方式指定动画的进度相对于初始位置右移。同时希望动画持续秒的时长，采用的动画效果。 CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。showImg(https://segmentfa...

leo108 2019-08-29 18:44 评论0 收藏0
2017-09-01 前端日报

摘要：前端日报精选如何优雅的编写代码深入理解内部机制专题之函数组合年月个有趣的和库最经典的前端面试题之一，你能答出什么幺蛾子中文翻译深入理解响应式原理掘金译与和交互掘金箭头函数使用禁忌技术栈耕耘助力美团点评前端进阶之路前端模块 2017-09-01 前端日报精选如何优雅的编写 JavaScript 代码深入理解 Node.js Stream 内部机制JavaScript专题之函数组合20...

Arno 2019-08-20 19:07 评论0 收藏0
css布局方法

摘要：在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。这样所有元素就会紧贴左边浮动，如果想要左右浮动，就可以把最右边的元素设置为这样就可以实现左右布局。谷歌搜索可以设置一个元素的渐变色，来使一个元素包含多种颜色。 1、左右布局这就要说到一个属性float，使用float: left;就可以让浮动元素会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中...

LMou 2019-08-29 15:42 评论0 收藏0
vue学习笔记（二）

摘要：供用户在相应的阶段对其进行操作。我们像下面这样使用这个指令大多数情况下，我们只需要使用与钩子函数。里提供了函数的简写形式钩子函数有两个常用的参数和。其他用法与全局自定义指令一致。一、vue生命周期 vue实例从创建到销毁的过程，称为生命周期，共有八个阶段。这八个阶段里分别有一个叫做钩子函数的实例选项。供用户在相应的阶段对其进行操作。 beforeCreate(){ //组件实例刚...

klivitamJ 2019-08-30 13:48 评论0 收藏0