2. 程式人生 > >純CSS實現對話氣泡(MD.5)

純CSS實現對話氣泡(MD.5)

阿新 • • 發佈：2018-12-17

在漫島的註冊成功引導頁，有一個小姐姐講述一些網站玩法規則，需要一個對話氣泡效果，用純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)

在漫島的註冊成功引導頁，有一個小姐姐講述一些網站玩法規則，需要一個對話氣泡效果，用純CSS實現了一下，效果如下（點選圖片放大看）： 網站實際效果結合了動畫體驗比截圖好，，做氣泡不難，關鍵點在於三角形的border只能有兩邊，所以我的實現思路是用一個只有兩邊邊框的正方形，用trans

純css實現氣泡對話方塊尖角處理

先來看一下效果圖： 簡單粗暴上程式碼： html： <div class="dialog-box">

純CSS實現氣泡框

set .org head left 一個 pos radi margin orange 效果圖如下： 源碼： <!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en" "http://

純css實現氣泡效果

先上程式碼： div.bubble{ position: absolute; margin: 0; padding: 0; color: #86181d; background-color: #ffdce0; border-color: #cea0a5; displa

純CSS實現聊天框小尖角、氣泡效果

經常看到這樣的尖角，以前不懂，以為都是用圖片做出來的，後來驚奇的發現，原來很多都是用CSS做出來的，既美觀又節省資源，真是兩全其美啊！ 那麼，用CSS怎麼實現這種效果呢？首先，來寫一個簡單的程式碼： <div class="arrow"></div&g

純css實現select下拉框並排顯示

code 同時 eight spl one 背景色 不起作用 表單 lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

使用純css實現波浪效果

波浪 gree transform orm infinite ram 定位 position mes 有時候我們需要實現水晃動的效果，其實我們可以通過css旋轉動畫和圓角來實現。 首先來2個div,外層div相對定位，內層div絕對定位，內層div大致位於外層div上半部分

通過純css實現圖片居中的多種實現方式

splay add pad src 純css webkit web center -c html結構： 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">

【CSS3】選擇器-純css實現輪播

ica 焦點 集合 meta 表示 style disable 設置 :active CSS選擇器： 基本選擇器： 通配符選擇器：*； 元素選擇器：元素標簽； class選擇器：相當於身份證上的名稱； id選擇器：相當於身份證號（唯一性）； 多元素組合選擇器

純CSS實現圖片水平垂直居中於DIV（圖片未知寬高）

分享 分享圖片 gin pos pic ble 居中 實現圖 class .demo{border:1px #ddd solid;width:267px;height:267px;overflow:hidden;text-align:center;display:tabl

CSS實現垂直居中的5種方法

logo cto 溢出 hover 元素垂直居中 OS num -o com 利用 CSS 來實現對象的垂直居中有許多不同的方法，比較難的是選擇那個正確的方法。我下面說明一下我看到的好的方法和怎麽來創建一個好的居中網站。 使用 CSS 實現垂直居中並不容易。有些方法在一些瀏

純css實現打字效果

idt strong htm rap 混合 實現 有時 append com 概述 很早以前就在別人的博客上面看到打字動畫了，覺得非常炫酷，以為是用js做的，找了半天也沒找到js在哪裏。今天看《css揭秘》，碰巧看到書上打字動畫的實現了，而且是純css實現的！我參考這本書把

純css實現

pan mas class key ani splay 100% ear document 實現此效果 .colorful { background-image: linear-gradient(to right, red, orange, yellow, green, y

純CSS實現垂直居中的幾種方法

right lin 兼容 bar 實現 syntax info pro ems 垂直居中是布局中十分常見的效果之一，為實現良好的兼容性，PC端實現垂直居中的方法一般是通過絕對定位，table-cell，負邊距等方法。有了css3，針對移動端的垂直居中就更加多樣化。 方法1：

純css實現二級導航

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>企業搜尋頁面</title> <style>

純CSS實現垂直居中

總結歸納一下現在學到的純CSS實現水平垂直居中的方法： （1）如果元素的寬度是已知的，那麼可以利用父類元素設定成position：relative，子類設定為position：absolute 然後定位距離上margin為50%，左50%，再減去元素自身的寬度就可以實現，例子程式碼： <

純css實現水平無限滾動--適應PC和移動端

一、HTML <style type="text/css"> * { margin: 0; padding: 0; list-style: none;

心跳動畫---純css實現

<style> * { margin: 0; padding: 0; } .heart { -webkit

純CSS實現立體感圓盤（立體化按鈕），點選有圖

線上編輯：https://codepen.io/sunnercms/ <div class="inner"> <div class="disc"> </div> </div> .inner{ position:relative;

純CSS實現3D照片墻

width jpg mage http tez 藍色 enter -h ccf HTML部分： <body> <div class="photo-wrap"> <!-- 舞臺 --> <div class="