Verwenden Sie CSS3, um WeChat-ähnliche Chat-Blasen zu implementieren

In diesem Artikel wird hauptsächlich der CSS3-Nachahmungs-WeChat-Chat-Blasen-Beispielcode vorgestellt, der einen gewissen Referenzwert hat.

Heute werde ich mit Ihnen ein Projekt teilen, das ich gerade gemacht habe. Da wir eine Chat-Funktion erstellen, war die Benutzeroberfläche der vorherigen Chat-Seite sehr hässlich, daher werde ich sie Ihnen hier nicht zeigen.

Jetzt werde ich Ihnen beibringen, wie Sie mit CSS3 eine Seite erstellen, die mit der WeChat-Chat-Oberfläche identisch ist.

Lassen Sie mich zunächst zeigen, wie die Seite aussieht, wie im Bild unten gezeigt:

Die Seite sieht ungefähr so ​​aus Lassen Sie uns gemeinsam die Produktionsschritte erlernen.

Teil Eins: HTML

<p class="leftd">

    <span ng-class="leftd_h">

        <img  src="/static/imghwm/default1.png"  data-src="./img/c_pic.pn"  class="lazy"  ng- / alt="Verwenden Sie CSS3, um WeChat-ähnliche Chat-Blasen zu implementieren" >

    </span>

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

        二货，你看你傻样！

    </p>

</p>

<p class="rightd">

    <span ng-class="rightd_h">

        <img  src="/static/imghwm/default1.png"  data-src="./img/u_pic.pn"  class="lazy"  ng- / alt="Verwenden Sie CSS3, um WeChat-ähnliche Chat-Blasen zu implementieren" >

    </span>

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

        嘻嘻嘻嘻。。。。。。

    </p>

</p>

<p class="leftd">

    <span ng-class="leftd_h">

        <img  src="/static/imghwm/default1.png"  data-src="./img/c_pic.pn"  class="lazy"  ng- / alt="Verwenden Sie CSS3, um WeChat-ähnliche Chat-Blasen zu implementieren" >

    </span>

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

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

    </p>

</p>

<p class="rightd">

    <span ng-class="rightd_h">

        <img  src="/static/imghwm/default1.png"  data-src="./img/u_pic.pn"  class="lazy"  ng- / alt="Verwenden Sie CSS3, um WeChat-ähnliche Chat-Blasen zu implementieren" >

    </span>

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

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

    </p>

</p>

Teil Zwei: CSS3

PS (Das ist der wichtigste Teil, also zeige ich dir den gesamten 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;

}

Hier sind im Grunde kleine Blasen, die mit CSS-Pseudoklassenelementen erstellt wurden. Es gibt viele Fälle im Internet, in denen der Chat-Avatar des Benutzers als Hintergrundbild verwendet wird. Ich bin jedoch der Meinung, dass dies für tatsächliche Projekte nicht sehr geeignet ist. Deshalb habe ich einige Änderungen vorgenommen, um es praktischer zu machen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden von CSS3 und jQuery, um Textbewegungen nach oben und unten zu realisieren, wenn man der Maus folgt

Verwendung CSS3, um den Falteffekt zu erzielen

Verwenden Sie CSS3, um die coole Sheriff-Homepage der schwarzen Katze zu realisieren

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um WeChat-ähnliche Chat-Blasen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!