WeChat 채팅 풍선을 모방하기 위해 CSS3를 사용하는 예

오늘은 제가 방금 작업한 프로젝트의 작은 사례를 공유하고 싶습니다. 채팅 기능을 작업 중이어서 이전 채팅 페이지 UI가 너무 못생겼기 때문에 여기서는 보여드리지 않겠습니다.

이제 CSS3를 사용하여 WeChat 채팅 인터페이스와 동일한 페이지를 만드는 방법을 가르쳐 드리겠습니다.

먼저 아래와 같이 페이지가 어떻게 생겼는지 보여드리겠습니다.

Xiaoyue 블로그는 WeChat 채팅 인터페이스를 모방합니다.

페이지 대략적인 모습입니다. 제작 단계를 함께 배워보겠습니다.

1부: HTML

<div class="leftd">
    <span ng-class="leftd_h">
        <img  ng-src="./img/c_pic.pn" / alt="WeChat 채팅 풍선을 모방하기 위해 CSS3를 사용하는 예" >
    </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="WeChat 채팅 풍선을 모방하기 위해 CSS3를 사용하는 예" >
    </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="WeChat 채팅 풍선을 모방하기 위해 CSS3를 사용하는 예" >
    </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="WeChat 채팅 풍선을 모방하기 위해 CSS3를 사용하는 예" >
    </span>
    <div class="speech right" ng-class="speech left"> 
         不不不，每天你都很漂亮的啦！
    </div>
</div>

2부: CSS3

PS (가장 중요한 부분이므로 코드를 모두 보여드리겠습니다!)

/* 微信气泡 */
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: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 15px;
    top: -20px;
    border: 10px solid;
    border-color: transparent transparent #989898 transparent;
}
div.speech:after {
 content: '';
 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: '';
 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: '';
 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: '';
 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: '';
 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;
}

다음은 기본적으로 CSS 의사 클래스 요소를 사용하여 만든 작은 거품입니다. 인터넷에는 사용자의 채팅 아바타를 배경 이미지로 사용하는 경우가 많지만 실제 프로젝트에서는 그다지 적합하지 않다고 느껴 좀 더 실용적으로 만들기 위해 일부 수정했습니다.

위 내용은 WeChat 채팅 풍선을 모방하기 위해 CSS3를 사용하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!