純粋な CSS を使用してボイスチャットのバブルボックス効果を実現する方法-CSSチュートリアル-php.cn

純粋な CSS を使用してボイスチャットのバブルボックス効果を実現する方法

藏色散人

リリース： 2021-04-20 15:36:45

オリジナル

6169 人が閲覧しました

ボイスチャットのバブルボックス効果を実現するための純粋な CSS メソッド: 最初に HTML サンプルファイルを作成し、次に本文に div を作成し、最後に「-moz-border-radius」などの CSS 属性を設定して実装します。」を div にボイスチャットのバブルボックスエフェクトを使用するだけです。

純粋な CSS を使用してボイスチャットのバブルボックス効果を実現する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

この記事では、pure cssを使用してボイスチャットのバブルボックス効果を実現する方法を主に紹介します。

ボイスチャットバブルボックスエフェクトは、日常生活やソーシャルネットワーキングサイトで非常に一般的で人気のあるダイアログボックスエフェクトです。

たとえば、WeChat や QQ のチャットダイアログインターフェイス。

純粋な CSS を使用してボイスチャットのバブルボックス効果を実現する方法

#したがって、初心者にとって、この効果を達成するのは難しいかもしれません。実際、この吹き出し効果を実現するにはさまざまな方法がありますが、最も簡単な CSS メソッドを使用して実現できます。

ここでは、純粋な CSS を使用して吹き出し効果を実現する簡単な方法を紹介します。

css コードの例は次のとおりです。

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>css实现语音气泡示例</title>
    <style type="text/css">
        #speech-bubble {
            width: 120px;
            height: 80px;
            background: #5ac4ed;
            position: absolute;
            left:100px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
        #speech-bubble:before {
            content:"";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-right: 26px solid #5ac4ed;
            border-bottom: 13px solid transparent;
            margin: 13px 0 0 -25px;
        }

    </style>
</head>
<body>
<div id="speech-bubble"></div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです。

純粋な CSS を使用してボイスチャットのバブルボックス効果を実現する方法