CSS3做圆形气泡是非常常见的一个效果,可以用在很多地方,如页面导航、轮播图、弹窗等等。代码非常简单,下面我们就给大家介绍一下怎样实现。
.bubble { width: 20px; height: 20px; border-radius: 50%; background-color: pink; position: relative; } .bubble:before { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; border-radius: 50%; background-color: white; transform: translate(-50%, -50%); }
首先,我们用CSS3的 border-radius 属性实现一个圆形的气泡。接着,我们设置气泡的背景颜色为粉色,为了突出气泡的效果。
下一步,我们为气泡添加一个伪元素,在气泡的中心添加一个白色圆心,使气泡更加的立体感。
这样,一个圆形气泡就做好了,非常简单吧!当然,如果你希望气泡更加的生动有趣,也可以在气泡上选择性的添加相应的动画或效果。