CSS不一定要写得多么复杂才能实现特殊效果。下面通过实例代码给大家分享CSS实现悬停过渡动画三部曲,感兴趣的朋友跟随小编一起看看吧

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;的声明。看下面,是不是一个还不错的褪色效果: 

 2.来点颜色看看指定一个变色过渡其实和褪色过渡的过程异曲同工。

首先,创建一个div元素,并为它添加一个名为color的类。

 

         

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实现悬停过渡动画三部曲,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

最新资讯
圆通

圆通"承诺达"解散?

有媒体报道称,圆通旗下承诺达“疑似解散”,圆通官方微博
任正非:华为做好了长期不取消实体清单的准备

任正非:华为做好了长期

华为方面今日披露任正非接受美联社采访纪要,任正非在接
全球颠覆者报告:特斯拉、马斯克双双入选

全球颠覆者报告:特斯拉

报告显示,27%的全球科技行业领袖认为电商平台是未来三
爱奇艺加大内容投入 龚宇:除爆款外还要做专项内容

爱奇艺加大内容投入

2019爱奇艺iJOY悦享会今日在上海举办,爱奇艺创始人兼CE
华为副董事长:预计今年年底将会超过60个商用网络

华为副董事长:预计今年

华为副董事长胡厚崑表示,在标准冻结的一年之内,现在已经
袁隆平团队将全面开展耐盐碱水稻育种工作

袁隆平团队将全面开展

农业农村部信息中心总工程师刘桂才在开幕式上表示,智慧
最新文章
针对class、id所做的CSS HACK

针对class、id所做的C

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK
WEB标准教程:P标签的应用

WEB标准教程:P标签的

从今天开始,我将全面的共享出我所能理解的所有WEB标准
Web前端开发的Firefox插件

Web前端开发的Firefox

一、Web DeveloperWeb Developer 可说是网页设计师最
详解CSS粘性定位 sticky

详解CSS粘性定位 stic

这篇文章主要介绍了CSS粘性定位 sticky 的相关知识,本
详解css透明度之rgba和opacity的区别及兼容

详解css透明度之rgba

对于设置透明度,我们有两个可以选的css3属性:rgba 和 op
轻松搞懂CSS浮动与清除浮动图文详解

轻松搞懂CSS浮动与清

本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮