怎么用CSS完成一个悬停过渡动画的项目
小编给大家分享一下怎么用CSS完成一个悬停过渡动画的项目，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
项目设置
在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单：
TEXT
CSS代码也一样简单。我们想要使用无衬线字体，并确保div中的段落文本是白色的，可以通过如下代码来实现：
body{
color:white;
font-family:Helvetica,Sans-Serif;
}
另外，给box元素添加如下CSS属性：
.box{
width:200px;/*SettheWidthofbox*/
height:50px;/*SettheHeightofbox*/
background:#424242;/*DarkGreyBackgroundcolor*/
transition:all0.25sease;/*Transitionsettings*/
display:flex;/*UseFlexboxonP*/
align-items:center;/*CenterP*/
justify-content:center;/*CenterP*/
margin:10px;/*ApplyamarginaroundourBox*/
}
无论你对CSS的过渡属性熟悉与否，我们在这里都来简要介绍一下，一共分为三步。.第一步，我们需要将它应用到all变化的属性。接下来，设置过渡时长为0.25秒。最后，将动画函数选为ease。ease的表现状态就是起止过程比较缓慢，中间过渡迅速。
hollyhigh!目前准备工作都已经就绪，接下来就是添加过渡效果了。
1.褪色效果
首先，添加一个褪色的过渡。新建一个div元素，并为它添加一个名为fade的类：
FADEHERE
接下来我们所需要做的就是为这个fade类指定悬停规则。我们需要借助CSS伪类选择器:hover来完成这件事情。这个伪类选择器对所有的元素都有效，并且会在元素处于鼠标指针悬停状态下的时候激活CSS声明。基于此，我们借助:hover选择器将div的透明度改为0.5：
.fade:hover{
opacity:0.5;
}
简单吧。上面这句CSS声明就为div指定了一个悬停效果。如下就是目前它展现的样子。而你之所以能够看到过渡样式，是因为我们一开始在名为box的类中使用了transition:all0.25sease;的声明。
2.来点颜色看看
指定一个变色过渡其实和褪色过渡的过程异曲同工。首先，创建一个div元素，并为它添加一个名为color的类。
COLORHERE
同样地，我们也要借助:hover选择器来帮我们完成这件事，但是这一次我们不是改变透明度而是背景色：
.color:hover{
background:#FF5722;
}
以上是"怎么用CSS完成一个悬停过渡动画的项目"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
