使用css实现QQ聊天气泡效果

最新推荐文章于 2024-07-26 16:03:03 发布

Miss_Shen

最新推荐文章于 2024-07-26 16:03:03 发布

阅读量6.6k

点赞数 1

分类专栏： CSS 文章标签： css 气泡

本文链接：https://blog.csdn.net/Miss_Shen/article/details/44201287

版权

本文介绍了如何使用CSS技术创建QQ聊天气泡效果，包括HTML结构和CSS样式代码，帮助读者理解并实现类似的设计。

摘要由CSDN通过智能技术生成

这是效果图~

html代码：

    <div class="bubbleDiv">
        <div class="bubbleItem">     <!--左侧的泡泡-->
            <span class="bubble leftBubble">
                老师，你好！
                <span class="bottomLevel"></span>
                <span class="topLevel"></span>
            </span>
        </div>


        <div class="bubbleItem clearfix">   <span style="font-family: Arial, Helvetica, sans-serif;"><!--右侧的泡泡--></span>
            <span class="bubble rightBubble">
                老师，你好！
                <span