利用CSS完成一个悬停过渡动画的项目

时间2024-05-21 08:34:03发布访客分类CSS浏览47

导读： 如下是我们将在本教程中构建的代码项目设置在这个项目中，我们将把过渡效果应用到一个class为box的元素上面。这个box元素内部是垂直和水平居中的文字内容。HTML结构相当简单： TEXT C...

　　如下是我们将在本教程中构建的代码　　项目设置　　在这个项目中，我们将把过渡效果应用到一个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!目前准备工作都已经就绪，接下来就是添加过渡效果了。到目前为止，div看起来应该像下面这样。　　2.png 　　1.褪色效果　　首先，添加一个褪色的过渡。新建一个div元素，并为它添加一个名为fade的类：　　　　

FADEHERE

　　　　接下来我们所需要做的就是为这个fade类指定悬停规则。我们需要借助CSS伪类选择器:hover来完成这件事情。这个伪类选择器对所有的元素都有效，并且会在元素处于鼠标指针悬停状态下的时候激活CSS声明。基于此，我们借助:hover选择器将div的透明度改为0.5：　　.fade:hover{ 　　opacity:0.5; 　　} 　　简单吧。上面这句CSS声明就为div指定了一个悬停效果。如下就是目前它展现的样子。而你之所以能够看到过渡样式，是因为我们一开始在名为box的类中使用了transition:all0.25sease; 的声明。看下面，是不是一个还不错的褪色效果：　　3.gif 　　2.来点颜色看看　　指定一个变色过渡其实和褪色过渡的过程异曲同工。首先，创建一个div元素，并为它添加一个名为color的类。　　　　

COLORHERE

　　　　同样地，我们也要借助:hover选择器来帮我们完成这件事，但是这一次我们不是改变透明度而是背景色：　　.color:hover{ 　　background:#FF5722; 　　}

本文转载自中文网

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处：利用CSS完成一个悬停过渡动画的项目
本文地址： https://pptw.com/jishu/664750.html

float浮动造成父级元素塌陷的解决方法 css里上下居中怎么弄？