Ein Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen-CSS-Tutorial-php.cn

Ein Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen

高洛峰

Freigeben： 2017-03-23 11:31:07

Original

1899 Leute haben es durchsucht

Heute möchte ich Ihnen einen kleinen Fall aus einem Projekt vorstellen, an dem ich gerade gearbeitet habe. Da wir an einer Chat-Funktion arbeiten, 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 unten gezeigt:

Ein Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen

Xiaoyue Blog imitiert die WeChat-Chat-Oberfläche

Seite So ungefähr sieht es aus, lernen wir gemeinsam die Produktionsschritte.

Teil eins: HTML

<div class="leftd">
    <span ng-class="leftd_h">
        <img  ng-src="./img/c_pic.pn" / alt="Ein Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen" >
    </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="Ein Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen" >
    </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="Ein Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen" >
    </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="Ein Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen" >
    </span>
    <div class="speech right" ng-class="speech left"> 
         不不不，每天你都很漂亮的啦！
    </div>
</div>

Nach dem Login kopieren

Teil zwei: CSS3

PS (Dies ist auch der wichtigste Teil, deshalb zeige ich Ihnen den gesamten 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;
}

Nach dem Login kopieren

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 detaillierte Inhalt vonEin Beispiel für die Verwendung von CSS3 zur Nachahmung von WeChat-Chatblasen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!