小编给大家分享一下如何利用CSS完成一个悬停过渡动画的项目,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子,可能只是几行代码,但是添加到网络应用程序中,却会让它增色不少。
如下是我们将在本教程中构建的代码
<强>项目设置
在这个项目中,我们将把过渡效果应用到一个类为盒子的元素上面。这个盒子元素内部是垂直和水平居中的文字内容. html结构相当简单:
CSS代码也一样简单。我们想要使用无衬线字体,并确保div中的段落文本是白色的,可以通过如下代码来实现:
另外,给盒子元素添加如下CSS属性:
<强> 1。褪色效果
首先,添加一个褪色的过渡。新建一个div元素,并为它添加一个名为褪色的类:
接下来我们所需要做的就是为这个褪色类指定悬停规则。我们需要借助CSS伪类选择器:盘旋来完成这件事情。这个伪类选择器对所有的元素都有效,并且会在元素处于鼠标指针悬停状态下的时候激活CSS声明。基于此,我们借助:悬停选择器将div的透明度改为0.5:
简单吧。上面这句CSS声明就为div指定了一个悬停效果。如下就是目前它展现的样子。而你之所以能够看到过渡样式,是因为我们一开始在名为盒子的类中使用了转型:所有0.25年代缓解;的声明。看下面,是不是一个还不错的褪色效果:
<强> 2。来点颜色看看
指定一个变色过渡其实和褪色过渡的过程异曲同工。首先,创建一个div元素,并为它添加一个名为颜色的类。
同样地,我们也要借助:悬停选择器来帮我们完成这件事,但是这一次我们不是改变透明度而是背景色:
如下就是实际效果了:
<强> 3。一起摇摆
接下来,来实现一个摆动的效果,这个效果实现起来比前面的两个例子稍显复杂。在这个例子中,我会采用@keyframes来完成。
@keyframes——赋予你在一个CSS动画序列中控制中间步骤的魔力。
首先还是一样,你肯定已经听烦了,创建一个div元素,并未它添加一个名为摆动的类:
接下来,我们要做的就是借助@keyframes来创建动画。我们先给动画起个名字,就叫摆动吧。并在如下的代码中添加抖动效果的实现:
从上面的代码已经可以看的出,@keyframes赋予我们将动画分解成单步,并且精确定义每一步发生了什么的能力。通过百分比的方式指定动画的进度:
20%, div相对于初始位置右移4 px。
40%, div相对于初始位置左移4 px。
60%, div相对于初始位置右移2 px。
80%, div相对于初始位置左移1 px。
