淘先锋技术网

首页 1 2 3 4 5 6 7

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 属性实现一个圆形的气泡。接着,我们设置气泡的背景颜色为粉色,为了突出气泡的效果。

下一步,我们为气泡添加一个伪元素,在气泡的中心添加一个白色圆心,使气泡更加的立体感。

这样,一个圆形气泡就做好了,非常简单吧!当然,如果你希望气泡更加的生动有趣,也可以在气泡上选择性的添加相应的动画或效果。