Utilisez CSS3 pour implémenter des bulles de discussion de type WeChat

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 créons 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.

Partie 1 : 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>

Chapitre Partie 2 : CSS3

PS (C'est la partie la plus importante, je vais donc 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 représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez CSS3 et jQuery pour réaliser des secousses de haut en bas en suivant le mouvement de la souris

Comment utiliser CSS3 pour obtenir l'effet de pliage

Utiliser CSS3 pour réaliser la page d'accueil cool du chat noir Sheriff

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!