Un exemple d'utilisation de CSS3 pour imiter les bulles de discussion WeChat-tutoriel CSS-php.cn

Un exemple d'utilisation de CSS3 pour imiter les bulles de discussion WeChat

高洛峰

Libérer： 2017-03-23 11:31:07

original

1899 Les gens l'ont consulté

Aujourd'hui, j'aimerais partager avec vous un petit cas d'un projet sur lequel je viens de travailler. Parce que nous travaillons sur 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 indiqué ci-dessous :

Un exemple dutilisation de CSS3 pour imiter les bulles de discussion WeChat

Le blog Xiaoyue imite l'interface de chat WeChat

page Voilà à peu près à quoi cela ressemble. Apprenons ensemble les étapes de production.

Première partie : HTML

<div class="leftd">
    <span ng-class="leftd_h">
        <img  ng-src="./img/c_pic.pn" / alt="Un exemple d'utilisation de CSS3 pour imiter les bulles de discussion WeChat" >
    </span>
    <div class="speech left" ng-class="speech left"> 
        二货，你看你傻样！
    </div>
</div>
<div class="rightd">
    <span ng-class="rightd_h">
        <img  ng-src="./img/u_pic.pn" / alt="Un exemple d'utilisation de CSS3 pour imiter les bulles de discussion WeChat" >
    </span>
    <div class="speech right" ng-class="speech left"> 
        嘻嘻嘻嘻。。。。。。
    </div>
</div>
<div class="leftd">
    <span ng-class="leftd_h">
        <img  ng-src="./img/c_pic.pn" / alt="Un exemple d'utilisation de CSS3 pour imiter les bulles de discussion WeChat" >
    </span>
    <div class="speech left" ng-class="speech left"> 
        笑什么笑，没看到本宝宝今天变漂亮了吗？
    </div>
</div>
<div class="rightd">
    <span ng-class="rightd_h">
        <img  ng-src="./img/u_pic.pn" / alt="Un exemple d'utilisation de CSS3 pour imiter les bulles de discussion WeChat" >
    </span>
    <div class="speech right" ng-class="speech left"> 
         不不不，每天你都很漂亮的啦！
    </div>
</div>

Copier après la connexion

Deuxième partie : CSS3

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

/* 微信气泡 */
div.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;
}
div.speech:before {
    content: &#39;&#39;;
    position: absolute;
    width: 0;
    height: 0;
    left: 15px;
    top: -20px;
    border: 10px solid;
    border-color: transparent transparent #989898 transparent;
}
div.speech:after {
 content: &#39;&#39;;
 position: absolute;
 width: 0;
 height: 0;
 left: 17px;
 top: -16px;
 border: 8px solid;
 border-color: transparent transparent #ffffff transparent;
}
div.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) );
}
div.speech.right:before {
 content: &#39;&#39;;
 position: absolute;
 width: 0;
 height: 0;
 top: 9px;
 bottom: auto;
 left: auto;
 right: -10px;
 border-width: 9px 0 9px 10px;
 border-color: transparent #989898;
}
div.speech.right:after {
 content: &#39;&#39;;
 position: absolute;
 width: 0;
 height: 0;
 top: 10px;
 bottom: auto;
 left: auto;
 right: -8px;
 border-width: 8px 0 8px 9px;
 border-color: transparent #bced50;
}
div .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) );
}
div .left:before {
 content: &#39;&#39;;
 position: absolute;
 width: 0;
 height: 0;
 top: 9px;
 bottom: auto;
 left: -10px;
 border-width: 9px 10px 9px 0;
 border-color: transparent #989898;
}
div .left:after {
 content: &#39;&#39;;
 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;
}

Copier après la connexion

Voici essentiellement de petites bulles réalisé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!