纯CSS实现对话气泡(MD.5)

在漫岛的注册成功引导页，有一个小姐姐讲述一些网站玩法规则，需要一个对话气泡效果，用纯CSS实现了一下，效果如下（点击图片放大看）：
这里写图片描述
网站实际效果结合了动画体验比截图好，，做气泡不难，关键点在于三角形的border只能有两边，所以我的实现思路是用一个只有两边边框的正方形，用transform: rotateZ(xxdeg)旋转对应角度即可。
话不多说，直接贴完整代码，复制粘贴拿回去看看就懂了。强调一句，图片你得给我替换咯，别不是这个效果又骂我啊。我每次都是实现了才发博客的！
另外，漫岛居民群欢迎所有喜欢动漫或者交流技术的伙伴们加入，群号：581062303。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>纯CSS实现对话气泡</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }

            html,body{
                height: 100%;
                width: 100%;
                overflow: hidden;
                background-color: #1A242F;
            }

            .girl {
                position: absolute;
                top: 50px;
                left: 0;
                right: 0;
                width: 492px;
                margin: 0 auto;
                z-index: 9;
            }

            .dbubble {
                opacity: 1;
                position: absolute;
                background-color: #fff;
                border: 1px solid #dedede;
                padding: 10px 15px;
                z-index: 20;
                border-radius: 8px;
            }

            .dbubble-text {
                font-size: 14px;
                color: #303030;
                line-height: 1.6;
                font-family: "微软雅黑";
            }

            .triangle-box {
                position: absolute;
            }

            .dbubble.dbubble1 {
                top: 10px;
                left: 0;
                width: 238px;
            }

            .dbubble.dbubble2 {
                top: 166px;
                left: -224px;
                width: 282px;
            }

            .dbubble.dbubble3 {
                top: 168px;
                right: -168px;
                width: 242px;
            }

            .dbubble.dbubble4 {
                opacity: 1;
                top: 300px;
                right: -168px;
                width: 172px;
            }

            .decide {
                display: flex;
                width: 100%;
                margin-top: 10px;
                padding: 10px 0 0;
                border-top: 1px solid #C0C4CC;
            }

            .decide a {
                position: relative;
                display: inline-block;
                width: 49%;
                text-align: center;
                color: #0492FF;
                font-size: 14px;
            }

            .decide a:hover {
                color: #0084FF;
            }

            .decide a:first-child::after {
                content: "";
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto 0;
                width: 1px;
                height: 16px;
                border-left: 1px solid #DCDFE6;
            }

            .triangle {
                width: 14px;
                height: 14px;
                border-bottom: 1px solid #dedede;
                border-right: 1px solid #dedede;
                background-color: #fff;
            }

            .triangle-box-bottom {
                bottom: -9px;
                left: 150px;
            }

            .triangle-box-bottom .triangle {
                transform: rotateZ(45deg);
                -moz-transform:rotateZ(45deg);
            }

            .triangle-box-right {
                bottom: 50px;
                right: -9px;
            }

            .triangle-box-right .triangle {
                transform: rotateZ(-45deg);
                -moz-transform:rotateZ(-45deg);
            }

            .triangle-box-left {
                top: 20px;
                left: -8px;
            }

            .triangle-box-left .triangle {
                transform: rotateZ(135deg);
                -moz-transform:rotateZ(135deg);
            }

            .triangle-box-top {
                top: -4px;
                left: 20px;
            }

            .triangle-box-top .triangle {
                height: 7px;
                transform: rotateZ(-157deg);
                -moz-transform:rotateZ(-157deg);
            }
        </style>
    </head>

    <body>
        <div class="girl">
            <img src="../img/girl.png" />

            <div class="dbubble dbubble1">
                <div class="dbubble-text">嗨，新伙伴！我是引导员
                    <span style="color:#E6A23C;">妍</span>
                    <span>，漫岛有很多规则和现实世界不一样，所以请务必仔细听我的讲解喔。</span>
                </div>
                <div class="triangle-box triangle-box-bottom">
                    <div class="triangle"></div>
                </div>
            </div>

                <div class="dbubble dbubble2">
                    漫岛是一个专为二次元，2.5次元的人们建立的虚拟区域，在这里
                    我们将用技术手段确保你的所有行为都能直接影响到整个漫岛的发展，
                    因此这会是一个怎样的世界完全取决于你们每一个人。
                </div>
                <div class="triangle-box triangle-box-right">
                    <div class="triangle"></div>
                </div>
            </div>

            <div class="dbubble dbubble3">
                <div class="dbubble-text">最后也是
                    是现实世界中的所有法律法规仍然在这个世界中适用，每一个人都要为自己的行为负责。
                </div>
                <div class="triangle-box triangle-box-left">
                    <div class="triangle"></div>
                </div>
            </div>

            <div class="dbubble dbubble4">
                <div class="dbubble-text">以上就是引导的全部内容，下一步就是去创建你的漫岛身份啦。</div>
                <div class="triangle-box triangle-box-top">
                    <div class="triangle"></div>
                </div>
                <div class="decide">
                    <a href="javascript:;">再看一遍</a>
                    <a href="javascript:;">创建角色</a>
                </div>
            </div>

        </div>

    </body>

</html>

纯CSS实现对话气泡(MD.5)

猜你喜欢