乱爱性全过程免费视频/午夜毛片视频/中文字幕av三区/一级视频网址

當前位置： 維易PHP培訓學院 > CSS教程 > 內容正文

CSS精仿微信對話框之微信語音部分

作者：維易PHP培訓學院   時間 2018-05-16

《CSS精仿微信對話框之微信語音部分》要點：
本文介紹了CSS精仿微信對話框之微信語音部分，希望對您有用。如果有疑問，可以聯系我們。

相關主題：CSS2和CSS3特效

今天看到一個很不錯的微信對話CSS效果生成，語音部分看圖：

CSS精仿微信對話框之微信語音部分


參考：http://www.taokouling.com/index/wechat


CSS實現：

<!DOCTYPE html>
<html lang="en">
<head>
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
       <meta charset="utf-8"/>
       <title>CSS仿微信對話聊天</title>
       <meta name="description" content="404"/>
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
       <style>
              *, :after, :before {
                     box-sizing: border-box;
              }
              .i-body {
                     position: absolute;
                     width: 650px;
                     top: 128px;
                     bottom: 100px;
                     left: 0;
                     background-size: 100% 100%;
                     background-repeat: no-repeat;
                     background-position: center;
                     /* background-image: url(../images/i-body-bg.jpg); */
 }
              .i-b-rec-text, .i-b-sen-text {
                     margin: 40px 52px 0 20px;
                     position: relative;
              }
              .i-b-rec-text img, .i-b-sen-text img {
                     position: absolute;
                     width: 82px;
                     height: 82px;
                     left: 0;
                     top: 0;
                     background: #fff;
              }
              img {
                     max-width: 100%;
              }
              .i-b-rec-text div, .i-b-sen-text div {
                     position: relative;
                     margin-left: 82px;
                     margin-right: 50px;
                     text-align: initial;
              }
              .i-b-rec-text div p, .i-b-sen-text div p {
                     font-size: 22px;
                     color: #888;
                     padding: 0;
                     margin: 0;
                     padding-left: 30px;
                     display: none;
                     position: relative;
                     top: -5px;
                     margin-bottom: -2px;
              }
              .i-b-rec-text div span, .i-b-sen-text div span {
                     float: left;
                     min-height: 80px;
                     min-width: 96px;
                     margin-left: 24px;
                     font-size: 28px;
                     border: 1px #ccc solid;
                     background: #fafafa;
                     border-radius: 10px;
                     position: relative;
              }
              .i-b-rec-text div i, .i-b-sen-text div i {
                     position: absolute;
                     width: 24px;
                     height: 24px;
                     background: url(http://www.taokouling.com/static/index/factory/images/rec-txt-bg.png) 1px -31px no-repeat;
                     left: -24px;
                     top: 27px;
              }
              .i-b-rec-text div.i-b-voice b, .i-b-sen-text div.i-b-voice b {
                     position: absolute;
                     width: 40px;
                     height: 40px;
                     background: url(http://www.taokouling.com/static/index/factory/images/rec-record.png) no-repeat;
                     background-size: 100%;
                     top: 20px;
                     left: 20px;
              }
              .i-b-rec-text div.i-b-voice em, .i-b-sen-text div.i-b-voice em {
                     color: #999;
                     position: absolute;
                     right: -115px;
                     top: 8px;
                     width: 100px;
                     padding: 20px 0;
              }
              .i-b-rec-text div span em, .i-b-sen-text div span em {
                     font-style: normal;
                     padding: 20px;
                     display: block;
              }
              /*======== 這里可取消，是語音進度條后面時間上方的X號========*/
 .i-b-rec-text .msg-del {
                     right: -50px;
                     left: auto;
              }

              .iphone-preview .msg-del {
                     display: block;
              }
              .msg-del {
                     position: absolute;
                     width: 30px;
                     height: 30px;
                     background: url(http://www.taokouling.com/static/index/factory/images/msg-del.png) no-repeat;
                     text-indent: -999999px;
                     left: 20px;
                     top: 5px;
                     cursor: pointer;
                     display: none;
              }
              /*===============*/
 .i-b-rec-text:after, .i-b-sen-text:after {
                     content: "";
                     display: block;
                     height: 0;
                     clear: both;
                     visibility: hidden;
              }

              /*===========右側自己的語音===========*/
 .i-b-sen-text {
                     margin: 40px 20px 0 46px;
              }
              .i-b-rec-text, .i-b-sen-text {
                     /*margin: 40px 52px 0 20px;*/
 position: relative;
              }

              .i-b-sen-text img {
                     left: auto;
                     right: 0;
              }
              .i-b-sen-text div {
                     margin-left: 50px;
                     margin-right: 82px;
              }
              .i-b-rec-text div, .i-b-sen-text div {
                     position: relative;
                     /*margin-left: 82px;
                     margin-right: 50px;*/
 text-align: initial;
              }
              .i-b-sen-text div span {
                     background: #9ce553;
                     border-color: #7ac754;
                     float: right;
                     margin-left: 0;
                     margin-right: 24px;
              }
              .i-b-sen-text div i {
                     background: url(http://www.taokouling.com/static/index/factory/images/sen-txt-bg.png) right -31px no-repeat;
                     left: auto;
                     right: -24px;
              }
              .i-b-sen-text div.i-b-voice b {
                     background: url(http://www.taokouling.com/static/index/factory/images/sen-record.png) no-repeat;
                     right: 20px;
                     left: auto;
              }
              .i-b-sen-text div.i-b-voice em {
                     right: auto;
                     left: -115px;
                     text-align: right;
              }
              .i-b-sen-text .msg-del {
                     left: -50px;
              }
              .iphone-preview .msg-del {
                     display: block;
              }

       </style>
</head>

<body>
參考：http://www.taokouling.com/index/wechat <br/>

<div class="i-body">
       <!--<div><span>星期二 下午4:37</span><a></a></div>
      <div>
       <img src="/static/images/face.png">
       <div>
         <p>馬克_SHI</p>
         <span>
           <i></i>
           <em>
             <div><img src="/static/images/index-image2.jpg" /></div>
           </em>
           <a></a>
         </span>
       </div>
      </div>
      <div>
       <img src="/static/face/10016.jpg">
       <div>
         <span>
           <i></i>
           <em>親，這個怎么用<img src="/static/images/qq_emoji/Expression_22@2x.png"></em>
           <a></a>
         </span>
       </div>
      </div>
      <div>
       <img src="/static/images/face.png">
       <div>
         <p>馬克_SHI</p>
         <span>
           <i></i>
           <em>這個是示例對話哦，你先點擊下面綠色的“清除對話”按鈕，然后切換到對話設置那里，添加你要的對話類型就行了，需要多個用戶進行對話請點擊“添加用戶”按鈕添加用戶，然后添加對話即可<img src="/static/images/qq_emoji/Expression_22@2x.png"></em>
           <a></a>
         </span>
       </div>
      </div>
      <div>
       <img src="/static/face/10016.jpg">
       <div>
         <span>
           <i></i>
           <em>好噠，謝謝你，我操作試試看</em>
           <a></a>
         </span>
       </div>
      </div>
      <div>
       <img src="/static/images/face.png">
       <div>
         <p>馬克_SHI</p>
         <span>
           <i></i>
           <em>88.00</em>
           <a></a>
         </span>
       </div>
      </div>
      <div>
       <img src="/static/face/10016.jpg">
       <div>
         <span>
           <i></i>
           <em>88.00</em>
           <a></a>
         </span>
       </div>
      </div>-->
 <div class="i-b-rec-text"><img src="http://www.taokouling.com/static/index/factory/images/face/10054.jpg">
              <div class="i-b-voice"><p class="i-b-nick">r8N3t</p><span style="width:329.20000000000005px"><i></i><b></b><em>53''</em><a class="msg-del"></a></span></div>
       </div>
       <div class="i-b-sen-text"><img src="http://www.taokouling.com/static/index/factory/images/face/10020.jpg">
              <div class="i-b-voice"><span style="width:140px"><i></i><b></b><em>10''</em><a class="msg-del"></a></span></div>
       </div>
</div>


<div id="bottom">

</div>


</body>
</html>

轉載請注明本頁網址：
http://www.fzlkiss.com/jiaocheng/14782.html


    標簽：css  微信  對話框  語音