怎么用HTML5+CSS3来创建淡入效果的提示框

小编给大家分享一下怎么用HTML5+CSS3来创建淡入效果的提示框，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

公司专注于为企业提供成都网站制作、成都网站设计、微信公众号开发、商城开发，微信平台小程序开发，软件定制网站设计等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，成都创新互联更提供一系列网站制作和网站推广的服务。

步骤一：设置一个基础提示框

代码如下

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>PHP中文网</title>

</head>

<style>

.tooltip{

position:relative;

display:inline-block;

border-bottom:1pxdottedblack;

}

.tooltip.tooltiptext{

visibility:hidden;

width:120px;

background-color:black;

color:#fff;

text-align:center;

border-radius:6px;

padding:5px0;

/*定位*/

position:absolute;

z-index:1;

}

.tooltip:hover.tooltiptext{

visibility:visible;

}

</style>

<bodystyle="text-align:center;">

<divclass="tooltip">鼠标移动到这

<spanclass="tooltiptext">提示文本</span>

</div>

</body>

</html>

步骤二：使用CSS3transition属性及opacity属性来实现提示工具的淡入效果

代码如下

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<title>PHP中文网</title>

</head>

<style>

.tooltip{

position:relative;

display:inline-block;

border-bottom:1pxdottedblack;

}

.tooltip.tooltiptext{

visibility:hidden;

width:120px;

background-color:black;

color:#fff;

text-align:center;

border-radius:6px;

padding:5px0;

position:absolute;

z-index:1;

bottom:100%;

left:50%;

margin-left:-60px;

/*淡入-1秒内从0%到100%显示:*/

opacity:0;

transition:opacity1s;

}

.tooltip:hover.tooltiptext{

visibility:visible;

opacity:1;

}

</style>

<bodystyle="text-align:center;">

<p>鼠标移动到以下元素，提示工具会再一秒内从0%到100%完全显示。</p>

<divclass="tooltip">PHP中文网

<spanclass="tooltiptext">666666666666</span>

</div>

</body>

</html>

怎么用HTML5+CSS3来创建淡入效果的提示框

看完了这篇文章，相信你对“怎么用HTML5+CSS3来创建淡入效果的提示框”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

文章题目：怎么用HTML5+CSS3来创建淡入效果的提示框
网页URL：https://www.cdcxhl.com/article10/pocedo.html

成都网站建设公司_创新互联，为您提供网站导航、外贸建站、网站收录、品牌网站制作、品牌网站建设、云服务器

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容