超级简单CSS项目,悬停过渡动画三部曲

原创 高志飞 教程 css 128阅读 2019-05-13 16:53:39 举报

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

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

项目设置

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

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

另外,给box元素添加如下CSS属性:

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

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

  1. 褪色效果

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

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

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

2.来点颜色看看

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

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

如下就是实际效果了:

  3.一起摇摆

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

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

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

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

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

  • 20%——div相对于初始位置右移4px。
  • 40%——div相对于初始位置左移4px。
  • 60%——div相对于初始位置右移2px。
  • 80%——div相对于初始位置左移1px。
  • 100%——div恢复到初始位置。

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

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

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

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

一个人学习会有迷茫,动力不足。这里推荐一下我的前端学习交流群:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复