大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
最简单的三角气泡
实现思路：
使用一个::before和::after，对两个设置边框，最后边框的效果就是三角形，一个三角形的边框颜色div一致，两一个则是白色，整好覆盖在上方。
代码
.bubble-box {
position: relative;
border: 2px solid #409eff;
border-radius: 5px;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
.bubble-box::before {
position: absolute;
right: 100%;
top: 50%;
margin: -5px 0 0px;
border: 10px solid transparent;
border-right-color: #409eff;
content: "";
}
.bubble-box::after {
position: absolute;
right: 100%;
top: 50%;
margin-top: -3px;
border: 8px solid transparent;
border-right-color: #fff;
content: "";
}
斜三角形气泡
实现逻辑
还是使用::after,使用它制作一个直角三角形
然后使用transform进行角度的倾斜达到效果。
.bubble-box {
position: relative;
border: 2px solid #409eff;
border-radius: 5px;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
.bubble-box::after {
content: "";
position: absolute;
border:10px solid transparent;
border-top-color: #409eff;
border-right-color: #409eff;
right: 100%;
top: 10%;
transform: skewY(10deg);
}
拖尾气泡
实现思路
仔细观察图片：首先可以看到右下角的拖尾是有弧度的，在CSS中最简单实现弧度的方法：
就是对元素的圆角进行操作，只需要对两条边同时操作，即可产生效果。
border-bottom-left-radius: 15px 15px;
然后的话，拖尾是比较小的，并没有图示的大，这个时候再简单的方法，就是在上面加一层白色的div，覆盖掉其中的一部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.bubble-box {
position: relative;
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
background-color: #409eff;
border-radius: 25px;
}
.bubble-box::before {
content: "";
position: absolute;
z-index: -1;
bottom: -2px;
right: -8px;
height: 20px;
border-right: 20px solid #409eff;
border-bottom-left-radius: 15px 15px;
-webkit-transform: translate(0, -2px);
}
.bubble-box::after {
content: "";
position: absolute;
z-index: 1;
bottom: -2px;
right: -56px;
width: 26px;
height: 20px;
background: white;
border-bottom-left-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
</style>
</head>
<body style="padding: 100px">
<div class="bubble-box">picker</div>
</body>
</html>
封面代码
这里给了一个最简单的代码，大概思路是有了，希望大家可以自己完善。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.bubble-box {
position: relative;
border: 2px solid #409eff;
border-radius: 5px;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
}
.bubble-box::before {
position: absolute;
right: 100%;
top: 50%;
margin: -5px 0 0px;
border: 10px solid transparent;
border-right-color: #409eff;
content: "";
}
.bubble-box::after {
position: absolute;
right: 100%;
top: 50%;
margin-top: -3px;
border: 8px solid transparent;
border-right-color: #fff;
content: "";
}
.bubble-child {
margin-top: 10px;
position: relative;
width: 40px;
height: 35px;
border-radius: 50%;
background-color: #409eff;
animation: zy 2.5s 0.15s linear infinite;
transform-origin: 20px 35px;
}
.bubble-child::before {
position: absolute;
right: 28%;
top: 90%;
border: 10px solid transparent;
border-top-color: #409eff;
content: "";
}
@-webkit-keyframes zy {
10% {
transform: rotate(45deg);
}
20% {
transform: rotate(-30deg);
}
30% {
transform: rotate(-20deg);
}
40% {
transform: rotate(10deg);
}
50%,
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body style="padding: 100px">
<div class="bubble-box">
<div class="bubble-child"></div>
picker
</div>
</body>
</html>
