应用CSS完成一个悬停过渡动画的项目(超级简略)
如下是我们将在本教程中构建的代码
项目设定
在这个项目中,我们将把过渡结果利用到一个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看起来应当像下面这样。
1.褪色结果
第一,增加一个褪色的过渡。创建一个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; }
如下就是现实结果了:
接下来,来实现一个摆动的结果。这个结果实现起来比前面的两个例子稍显复杂。在这个例子中,我会采纳@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完成一个悬停过渡动画的项目(超级简略)的细致内容,更多请关注 百分百源码网 其它相干文章!