纯CSS打造Bubble气泡提醒框完成编码

日期:2021-01-20 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

那有木有方法弄1个既便捷又适配又友好的Bubble气泡提醒框呢?回答是能够的,并且就用纯CSS来来完成,自然在没出实际效果以前你有权去怀疑这件事儿,但出了实际效果后,你务必坚定不移的了解:楼主是老实巴交人,遁入空门人是不打诳语的。实际上呢这个方式是我之前个人收藏在另外一个blog中的,如今以便能让更多的盆友便捷地应用,就共享到blog园吧。不管你是不是用获得,我都谢谢你抽时间到来幸我这篇文章内容。

最先大家来界定1组CSS款式,用来叙述bubble框的款式,这里分4种状况,箭头各自在上、右、下、左,CSS编码以下:

拷贝编码
编码以下:

.bubble-box{
background:#EEE;
width:200px;
margin-bottom:30px;
}
.bubble-box .wrap{
background:#EEE;
/* 调整IE6 */
_position:relative;
_z-index:10;
}
/* arrow-effect */
.arrow-left{ border-left:20px solid #FFF; border-top:20px solid #EEE; margin-top:20px;}
.arrow-right{ border-right:20px solid #FFF; border-top:20px solid #EEE;}
.arrow-top{ border-left:20px solid #EEE; border-top:20px solid #FFF; margin-left:20px;}
.arrow-bottom{ border-left:20px solid #EEE; border-bottom:20px solid #FFF; margin-left:20px;}
.arrow-left .wrap,
.arrow-right .wrap{
width:180px;
padding:12px 10px 12px 10px;
margin-top:⑷0px;
}
.arrow-top, .arrow-bottom{ width:140px;}
.arrow-top .wrap,
.arrow-bottom .wrap{
width:180px;
padding:12px 10px 12px 10px;
margin-left:⑷0px;
}

接下来就各自来运用上述款式从而来完成bubble弹出框的实际效果:
1、箭头在上方的状况,html编码以下:

拷贝编码
编码以下:

<div class="bubble-box arrow-top">
<div class="wrap">css bubble -- 箭头在上方</div>
</div>

2、箭头在右方的状况,html编码以下:

拷贝编码
编码以下:

<div class="bubble-box arrow-right">
<div class="wrap">css bubble -- 箭头在右方</div>
</div>

3、箭头在正下方的状况,html编码以下:

拷贝编码
编码以下:

<div class="bubble-box arrow-bottom">
<div class="wrap">css bubble -- 箭头在正下方</div>
</div>

4、箭头在左方的状况,html编码以下:

拷贝编码
编码以下:

<div class="bubble-box arrow-left">
<div class="wrap">css bubble -- 箭头在左方</div>
</div>

如何,编码还算简约吧。此外问1下,怎样在blog园编写器里应用CSS编码,原本我准备做成线上demo的,可是style放不进去,只好截图了。因此你只好依据出示的编码自身去搞了。

忘掉能够提交编码的,案例编码已提交,要用的能够免费下载(升级于:11月13日 9:50)

免费下载demo