Exemple de code de bulle de chat WeChat imitation CSS3

Cet article présente principalement l'exemple de code de bulle de discussion WeChat d'imitation CSS3, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Aujourd'hui, je vais partager avec vous un projet que je viens de réaliser. parce que nous construisons une fonction de chat, l'interface utilisateur de la page de chat précédente était très moche, je ne vous la montrerai donc pas ici.

Maintenant, je vais vous apprendre à utiliser CSS3 pour créer une page identique à l'interface de chat WeChat.

Tout d'abord, laissez-moi vous montrer à quoi ressemble la page, comme le montre l'image ci-dessous :

La page ressemble à peu près à ceci. , apprenons ensemble les étapes de production du Bar.

Première partie : HTML

<p class="leftd">

    <span ng-class="leftd_h">

        <img ng-src="./img/c_pic.pn" />

    </span>

    <p class="speech left" ng-class="speech left"> 

        二货，你看你傻样！

    </p>

</p>

<p class="rightd">

    <span ng-class="rightd_h">

        <img ng-src="./img/u_pic.pn" />

    </span>

    <p class="speech right" ng-class="speech left"> 

        嘻嘻嘻嘻。。。。。。

    </p>

</p>

<p class="leftd">

    <span ng-class="leftd_h">

        <img ng-src="./img/c_pic.pn" />

    </span>

    <p class="speech left" ng-class="speech left"> 

        笑什么笑，没看到本宝宝今天变漂亮了吗？

    </p>

</p>

<p class="rightd">

    <span ng-class="rightd_h">

        <img ng-src="./img/u_pic.pn" />

    </span>

    <p class="speech right" ng-class="speech left"> 

         不不不，每天你都很漂亮的啦！

    </p>

</p>

Deuxième partie : CSS3

PS (C'est la partie la plus importante, donc je vais vous montrer tout le code !)

/* 微信气泡 */

p.speech {

    float: left;

    margin: 10px 0;

    padding: 8px;

    table-layout: fixed;

    word-break: break-all;

    position: relative;

    background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #ececec), color-stop(0.5, #dbdbdb), color-stop(0.9, #dcdcdc), to(#8c8c8c) );

    border: 1px solid #989898;

    border-radius: 8px;

}

p.speech:before {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    left: 15px;

    top: -20px;

    border: 10px solid;

    border-color: transparent transparent #989898 transparent;

}

p.speech:after {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 left: 17px;

 top: -16px;

 border: 8px solid;

 border-color: transparent transparent #ffffff transparent;

}

p.speech.right {

 display: inline-block;

 box-shadow: -2px 2px 5px #CCC;

 margin-right: 10px;

 max-width: 75%;

 float: right;

 background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#e4ffa7), color-stop(0.1, #bced50), color-stop(0.4, #aed943), color-stop(0.8, #a7d143), to(#99BF40) );

}

p.speech.right:before {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 9px;

 bottom: auto;

 left: auto;

 right: -10px;

 border-width: 9px 0 9px 10px;

 border-color: transparent #989898;

}

p.speech.right:after {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 10px;

 bottom: auto;

 left: auto;

 right: -8px;

 border-width: 8px 0 8px 9px;

 border-color: transparent #bced50;

}

p .left {

 display: inline-block;

 box-shadow: 2px 2px 2px #CCCCCC;

 margin-left: 10px;

 max-width: 75%;

 position: relative;

 background: -webkit-gradient( linear, 50% 0%, 50% 100%, from(#ffffff), color-stop(0.1, #eae8e8), color-stop(0.4, #E3E3E3), color-stop(0.8, #DFDFDF), to(#D9D9D9) );

}

p .left:before {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 9px;

 bottom: auto;

 left: -10px;

 border-width: 9px 10px 9px 0;

 border-color: transparent #989898;

}

p .left:after {

 content: '';

 position: absolute;

 width: 0;

 height: 0;

 top: 10px;

 bottom: auto;

 left: -8px;

 border-width: 8px 9px 8px 0;

 border-color: transparent #eae8e8;

}

.leftimg {

 float: left;

 margin-top: 10px;

}

.rightimg {

 float: right;

 margin-top: 10px;

}

.leftd {

 clear: both;

 float: left;

 margin-left: 10px;

}

.rightd {

 clear: both;

 float: right;

 margin-right: 10px;

}

 

.leftd_h{

 width: 39px;

 height: 39px;

 border-radius: 100%;

 display: block;

 float: left;

 overflow: hidden;

}

 

.leftd_h img{

 display: block;

 width: 100%;

 height: auto;

}

.rightd_h{

 width: 39px;

 height: 39px;

 border-radius: 100%;

 display: block;

 float: right;

 overflow: hidden;

}

 

.rightd_h img{

 display: block;

 width: 100%;

 height: auto;

}

Voici essentiellement de petites bulles créées à l’aide d’éléments de pseudo-classe CSS. Il existe de nombreux cas sur Internet où l'avatar de discussion de l'utilisateur est utilisé comme image d'arrière-plan, mais je pense que cela n'est pas très approprié dans les projets réels, j'ai donc apporté quelques modifications pour le rendre plus pratique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!