超级简单的CSS项目，Hover过渡动画三部曲
时间：2023-03-30 19:30:33
CSS
CSS实现特效不用复杂。下面是三个超级简单的过渡示例，它们可能只有几行代码，但添加到Web应用程序中并为其添加了很多颜色。这是我们将在本教程中构建的代码项目。在这个项目中设置，我们将过渡效果应用于具有类框的元素。此框元素内部是垂直和水平居中的文本内容。HTML结构挺简单的：TEXT
这里推荐我的前端学习交流按钮qun：731771211，同样和学习前端一样简单-结束CSS代码。我们要使用无衬线字体，并保证div中的段落文字为白色，可以通过如下代码实现：body{color:white;font-family:Helvetica,Sans-Serif;}另外，给box元素添加如下CSS属性：.box{width:200px;/*设置框的宽度*/height:50px;/*设置框的高度*/background:#424242;/*深灰色背景色*/transition:all0.25/*过渡设置*/display:flex;/*在P上使用Flexbox*/align-items:center;/*居中P*/justify-content:center;/*居中P*/margin:10px;/*ApplyamarginaroundourBox*/}不管你是否熟悉CSS过渡属性，在这里简单介绍一下，分为三步。.第一步，我们需要将它应用到所有变化的属性上。接下来，将过渡持续时间设置为0.25秒。最后，选择动画功能作为轻松。缓和的表现状态是开始和结束过程比较慢，中间过渡很快。冬青高！现在准备工作已经准备就绪，接下来就是添加转场效果了。到目前为止，div应该如下所示。淡入淡出效果首先，添加淡入淡出过渡。创建一个新的div元素并向其添加一个名为fade的类：
FADEHERE
接下来我们需要做的是为此创建一个类fade指定悬停规则。我们需要使用CSS伪类选择器:hover来完成这个。这个伪类选择器适用于所有元素并在元素悬停时激活CSS声明。基于此，我们使用:hover选择器将div的透明度更改为0.5：.fade:hover{opacity:0.5;}很简单。上面的CSS声明指定了div的悬停效果。这是它目前的样子。而之所以能看到transition样式是因为我们使用了transition:all0.25sease;在名为box的类中声明开头。看下面，是不是很好的淡入淡出效果：2.来一些颜色看看，指定一个变色过渡其实和淡入淡出过渡的过程是一样的。首先，创建一个div元素并向其添加一个名为color的类。
COLORHERE
同样，我们还将使用:hover选择器来帮助我们完成此操作，但这次我们不更改透明度，而是更改背景颜色：.color:hover{background:#FF5722;}实际效果如下：3.一起摆动接下来实现摆动效果。这个效果比前面两个例子实现起来稍微复杂一些。在这个例子中，我将使用@keyframes来完成。@keyframes-给你控制CSS动画序列中的中间步骤的魔力。首先，都是一样的，你一定听腻了，创建一个div元素，给它添加一个叫wiggle的类：
