你的位置:首页 > 软件开发 > 网页设计 > 基于html5 svg左侧滑出手机聊天框代码

基于html5 svg左侧滑出手机聊天框代码

发布时间:2015-09-08 10:00:06
分享一款基于html5 svg左侧滑出手机聊天框代码是一款基于svg的弹性动画手机聊天界面特效代码。效果图如下:在线预览 源码下载实现的代码。html代码:<div class="demo"> <svg class ...

分享一款基于html5 svg左侧滑出手机聊天框代码是一款基于svg的弹性动画手机聊天界面特效代码。效果图如下:

基于html5 svg左侧滑出手机聊天框代码

在线预览    源码下载

实现的代码。

html代码:

<div class="demo">    <svg class="sidebar" viewBox="0 0 300 500">      <path class="s-path" fill="#fff" d="M0,0 50,0 a0,250 0 1,1 0,500 L0,500" />    </svg>    <div class="static">      <div class="static__text">Pull white sidebar to the right</div>    </div>    <div class="sidebar-content">      <div class="contact">        <img src='/images/loading.gif' data-original="img/1.png"  class="contact__photo" />        <span class="contact__name">Ethan Hawke</span>        <span class="contact__status online"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/2.png"  class="contact__photo" />        <span class="contact__name">Natalie Portman</span>        <span class="contact__status online"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/3.png"  class="contact__photo" />        <span class="contact__name">Kevin Spacey</span>        <span class="contact__status online"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/4.png"  class="contact__photo" />        <span class="contact__name">Rosamund Pike</span>        <span class="contact__status online"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/5.png"  class="contact__photo" />        <span class="contact__name">Robert Redford</span>        <span class="contact__status online"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/6.png"  class="contact__photo" />        <span class="contact__name">Scarlett Johansson</span>        <span class="contact__status online"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/7.png"  class="contact__photo" />        <span class="contact__name">Tom Cruise</span>        <span class="contact__status"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/8.png"  class="contact__photo" />        <span class="contact__name">Eva Green</span>        <span class="contact__status"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/9.png"  class="contact__photo" />        <span class="contact__name">Paul Newman</span>        <span class="contact__status"></span>      </div>      <div class="contact">        <img src='/images/loading.gif' data-original="img/1.png"  class="contact__photo" />        <span class="contact__name">Thomas Break</span>        <span class="contact__status"></span>      </div>      <div class="search">        <img src='/images/loading.gif' data-original="img/t8TeL1S.png"  class="search__img" />        <input type="text" class="search__input" placeholder="Search" />      </div>    </div>    <div class="chat">      <span class="chat__back"></span>      <span class="chat__status">status</span>      <div class="chat__person">        <span class="chat__online active"></span>        <span class="chat__name">Huehue Huehue</span>      </div>      <div class="chat__messages">        <div class="chat__msgRow">          <div class="chat__message mine">Such SVG, much Javascript, very CSS!</div>        </div>        <div class="chat__msgRow">          <div class="chat__message notMine">Wow!</div>        </div>        <div class="chat__msgRow">          <div class="chat__message notMine">Very elastic! Such easings!</div>        </div>        <div class="chat__msgRow">          <div class="chat__message mine">          </div>        </div>      </div>      <input type="text" class="chat__input" placeholder="Your message" />    </div>  </div>  <script type="text/javascript" src='/images/loading.gif' data-original='js/stopExecutionOnTimeout.js?t=1'></script>  <script type="text/javascript" src='/images/loading.gif' data-original='js/jquery.min.js'></script>  <script type="text/javascript" src='/images/loading.gif' data-original="js/main.js"></script>

原标题:基于html5 svg左侧滑出手机聊天框代码

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。