帮我用js写一个微信聊天那种气泡效果
时间: 2023-04-04 22:01:42 浏览: 127
微信聊天气泡
4星 · 用户满意度95%
当然可以!
下面是一个使用 JavaScript 实现微信聊天气泡效果的示例代码:
```css
.bubble {
position: relative;
background: #f1f1f1;
border-radius: .4em;
padding: .5em;
}
.bubble:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-style: solid;
border-width: .5em .5em .5em 0;
border-color: #f1f1f1 transparent;
display: block;
width: 0;
z-index: 0;
}
.bubble.mine {
background: #0084ff;
color: #fff;
}
.bubble.mine:before {
right: auto;
left: 0;
border-width: .5em 0 .5em .5em;
border-color: transparent #0084ff;
}
```
```html
<div class="bubble mine">
我的消息
</div>
<div class="bubble">
对方的消息
</div>
```
上面的代码使用了伪元素和 CSS3 的 border-radius 和 transform 属性来实现气泡的弧形边角和尖角效果。为了区分自己的消息和对方的消息,我们还使用了不同的背景色和文字颜色。
希望这些内容对你有帮助!
阅读全文