利用CSS3实现气泡效果的教程

2019-09-10 郑州网站建设  

CSS Code复制内容到剪贴板

<p class="speech"></p>  

先给外层的容器添加样式:

CSS Code复制内容到剪贴板

p.speech{   

positionrelative;   

width200px;   

height100px;   

text-aligncenter;   

line-height100px;   

background-color#fff;   

border8px solid #666;   

-webkit-border-radius: 30px;   

-moz-border-radius: 30px;   

border-radius: 30px;   

-webkit-box-shadow: 2px 2px 4px #888;   

-moz-box-shadow: 2px 2px 4px #888;   

box-shadow: 2px 2px 4px #888;   

}  

没有什么非常复杂的,主要的核心就在postion:relative,用来定位对话浮层的。我们还需要一些Mozilla和webkit的属性来完成圆角和阴影,IE8以下的浏览器看不到这些属性,只是显示一个框,不影响总体的效果。

201573185141677.jpg (224×124)

我们现在需要创建对话浮层下面的那个三角形的指向日志o了。不使用图片,我们使用CSS边框来完成这个效果。看看下面这个用不同色彩边框完成的效果。

201573185228512.jpg (80×80)

我们把高度和宽度减少到0px,然后给边框使用不同的大小,看看效果:

201573185249498.jpg (120×100)

为了最后能做成指示日志o的样子,我们把上边距和左边距设置为solid,下边距和右边距设置为透明:

201573185308406.jpg (50×50)

但是我们把这个放哪呢?还好,我们可以使用CSS的伪类:before和:after来生成,所以:

CSS Code复制内容到剪贴板

p.speech:before{   

content' ';   

positionabsolute;   

width: 0;   

height: 0;   

left30px;   

top100px;   

border25px solid;   

border-color#666 transparent transparent #666;   

}  

现在三角形的标识就定位在我们的气泡下面了。另外,不要费事去考虑这个元素的阴影,他会定位在透明边界的旁边,而不是看到的图形的旁边。

201573185329163.jpg (224×160)

我们还需要移除三角形的一部分。我们可以在里面放置一个白色的小三角形来达到这个效果。

CSS Code复制内容到剪贴板

p.speech:after{   

content' ';   

positionabsolute;   

width: 0;   

height: 0;   

left38px;   

top100px;   

border15px solid;   

border-color#fff transparent transparent #fff;   

}  

我们的不使用图片的对话气泡就完成了:

201573185347182.jpg (224×160)

另外,我们还可以使用:before和:after伪类来做很多其他的事情,比如,一个思考气泡也可以通过这样方案完成:

首先也是建一个

CSS Code复制内容到剪贴板

<p class="thought">I think...</p>  

css代码:

CSS Code复制内容到剪贴板

p.thought{   

positionrelative;   

width130px;   

height100px;   

text-aligncenter;   

line-height100px;   

background-color#fff;   

border8px solid #666;   

-webkit-border-radius: 58px;   

-moz-border-radius: 58px;   

border-radius: 58px;   

-webkit-box-shadow: 2px 2px 4px #888;   

-moz-box-shadow: 2px 2px 4px #888;   

box-shadow: 2px 2px 4px #888;   

}  

CSS Code复制内容到剪贴板

p.thought:before, p.thought:after{   

content'';   

positionabsolute;   

left10px;   

top70px;   

width40px;   

height40px;   

background-color#fff;   

border8px solid #666;   

-webkit-border-radius: 28px;   

-moz-border-radius: 28px;   

border-radius: 28px;   

z-index:5;   

}  

CSS Code复制内容到剪贴板

p.thought:after{   

positionabsolute;   

width20px;   

height20px;   

left5px;   

top100px;   

-webkit-border-radius: 18px;   

-moz-border-radius: 18px;   

border-radius: 18px;   

z-index:6;   


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1749.html转载请标明出处,谢谢合作!
标签:
  • css
  • CSS3
  • 一个
  • 定义
  • 复制
  • Ч
  • Code
  • 首先