CSS3 모방 WeChat 채팅 풍선 코드 예

이 글은 주로 참조 가치가 있는 CSS3 모방 WeChat 채팅 버블 예제 코드를 소개합니다. 관심 있는 친구들은 이를 참조할 수 있습니다.

오늘은 제가 방금 수행한 작은 프로젝트를 여러분과 공유하겠습니다. 채팅 기능을 구축하고 있기 때문에 이전 채팅 페이지 UI가 너무 보기 흉해서 여기서는 보여드리지 않겠습니다.

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

먼저 아래 그림과 같이 페이지가 어떻게 보이는지 보여드리겠습니다.

페이지는 대략 다음과 같습니다. , 제작 단계를 함께 알아볼까요?

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>

2부: CSS3

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

/* 微信气泡 */

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;

}

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

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