CSS3基础纯CSS制作会话气泡和微信图标的简单步骤

纯CSS制作会话气泡和微信图标的简单步骤

通过CSS中的2D变换和定位的配合,可以实现一些简单的会话气泡图案,这样避免图片的使用,可以减少服务器的资源请求,本文以微信图标为例,简单的说说回话气泡的CSS实现方法:

微信图标相对来说很简单,大致就是两个椭圆形加两个三角形即可组成,下面首先写出html布局:

<div id="wechat">
 <div class="w1"></div>
 <div class="w2"></div>
</div>

给图标整体先做一个背景的设置:

#wechat {
 width:400px;height:400px;
 background-color:#0a0;
 position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;
 border-radius:32px;
}

现在得到了整个图标的背景:

CSS制作微信图标1.png

接下来绘制一个白色的椭圆形状,并定位到图标的相应位置:

.w1 {
 width:230px;height:200px;
 background-color:#fff;
 border-radius:50%;
 position:absolute;left:40px;top:67px;
}

CSS制作微信图标2.png

通过伪元素的方法,在这个椭圆形的上方加上两个小圆形:

.w1:before {
 content:" ";
 position:absolute;left:60px;top:50px;
 background-color:#0a0;
 width:30px;height:30px;
 border-radius:50%;
}
.w1:after {
 content:" ";
 position:absolute;right:60px;top:50px;
 background-color:#0a0;
 width:30px;height:30px;
 border-radius:50%;
}

CSS制作微信图标3.png

同样的方法,再绘制一个尺寸较小的椭圆,并定位到刚才那个椭圆的右下角适当位置:

.w2 {
 width:198px;height:163px;
 background-color:#fff;
 border-radius:50%;
 position:absolute;right:40px;top:157px;
}
.w2:before {
 content:" ";
 position:absolute;left:52px;top:42px;
 background-color:#0a0;
 width:25px;height:25px;
 border-radius:50%;
}
.w2:after {
 content:" ";
 position:absolute;right:52px;top:42px;
 background-color:#0a0;
 width:25px;height:25px;
 border-radius:50%;
}

给刚才第二个椭圆通过阴影属性加上一个绿色的描边:

box-shadow:0 0 0 8px #0a0;

这样两个椭圆形之间就被分隔开了,呈现出立体层叠的效果:

CSS制作微信图标5.png

接下来要给两个椭圆分别加上一个三角形的小尾巴,这里我简单的通过平行四边形的方法获得:

#wechat:before {
 content:" ";
 width:40px;height:60px;
 background-color:#fff;
 transform:skew(4deg,40deg) rotate(-12deg);
 border-radius:10px;
 position:absolute;z-index:2;right:80px;bottom:84px;
}
#wechat:after {
 content:" ";
 width:50px;height:70px;
 background-color:#fff;
 transform:skew(-4deg,-36deg) rotate(12deg);
 border-radius:8px;
 position:absolute;z-index:2;left:75px;bottom:138px;
}

这里将小矩形通过变形为一个平行四边形,再旋转相应的角度,定位到椭圆的下方,即实现了小尾巴的效果,一个完整的微信图标就做好了:

CSS制作微信图标.png

在实际运用当然不会遇到需要制作微信图标的情况,网页中会经常出现下面这样的图案,基本的思路都是使用伪元素添加一个小尾巴:

CSS指示三角形.png

这个很简单,就是通过伪元素添加了一个旋转45度的正方形而已,整体代码为:

div {
 width:110px;line-height:45px;
 background-color:#49f;
 position:relative;
}
div p {
 text-align:center;
 color:#fff;
 font-weight:bold;
}
div:after {
 content:" ";
 width:30px;height:30px;
 background-color:#49f;
 position:absolute;left:30px;bottom:-3px;
 transform:rotate(45deg);
 z-index:-1;
}

<div><p>企业简介</p></div>

CSS会话气泡.png

这个小尾巴的图案是曲线的形式,主要是通过圆角边框实现的,整体代码为:

div {
 width:100px;line-height:80px;
 background-color:#5a9;
 position:relative;
 border-radius:50%;
}
div p {
 text-align:center;
 color:#fff;
 font-weight:bold;
}
div:after {
 content:" ";
 width:42px;height:30px;
 background-color:transparent;
 border-top:22px solid #5a9;
 position:absolute;left:17px;bottom:-15px;
 transform:rotate(60deg);
 z-index:-1;
 border-radius:0 38px 0 0;
}

<div><p>精彩评论</p></div>

通过单独定义某一个角的圆角属性,配合边框和旋转,便可以轻松的得到曲线小尾巴的效果。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/153.html