CSS实现悬停过渡动画三部曲
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。
如下是我们将在本教程中构建的代码项目设置在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。
HTML结构相当简单：
<div class='box'> <p>TEXT</p> </div>
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的类：
<div class='box fade'> <p>FADE HERE</p> </div>
接下来我们所需要做的就是为这个fade类指定悬停规则。我们需要借助CSS伪类选择器:hover来完成这件事情。这个伪类选择器对所有的元素都有效，并且会在元素处于鼠标指针悬停状态下的时候激活CSS声明。基于此，我们借助:hover选择器将div的透明度改为0.5：
.fade:hover {
opacity: 0.5;
}
简单吧。上面这句CSS声明就为div指定了一个悬停效果。如下就是目前它展现的样子。而你之所以能够看到过渡样式，是因为我们一开始在名为box的类中使用了transition:all 0.25s ease;的声明。看下面，是不是一个还不错的褪色效果：
2.来点颜色看看指定一个变色过渡其实和褪色过渡的过程异曲同工。
首先，创建一个div元素，并为它添加一个名为color的类。
<div class='box color'> <p>COLOR HERE</p> </div>
同样地，我们也要借助:hover选择器来帮我们完成这件事，但是这一次我们不是改变透明度而是背景色：
.color:hover {
background: #FF5722;
}
如下就是实际效果了：
3.一起摇摆接下来，来实现一个摆动的效果。
这个效果实现起来比前面的两个例子稍显复杂。在这个例子中，我会采用@keyframes来完成。@keyframes——赋予你在一个CSS动画序列中控制中间步骤的魔力。首先还是一样，你肯定已经听烦了，创建一个div元素，并未它添加一个名为wiggle的类：
<div class='box wiggle'> <p>WIGGLE WIGGLE</p> </div>
接下来，我们要做的就是借助@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实现悬停过渡动画三部曲，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
这是一款带动画过度效果的社会化图标，默认的情况下，图标会有一个水波荡漾开的效果，鼠标移上去会有一个胶囊闪动的效果，喜欢的朋友快来下载源码吧2020-11-09
这篇文章主要介绍了css实现鼠标放上去时图片过渡转换动画,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-09
这篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-08
这篇文章主要介绍了CSS 动态高度过渡动画效果的实现,本文通过实例代码给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-15
最新评论