Based on html5 svg, the code of the mobile chat box is displayed on the left, html5svg

Based on html5 svg, the code of the mobile chat box is displayed on the left, html5svg

This article shares an html5 svg-based code for sliding out text box on the left side of the mobile phone. It is an svg-based Elastic animation mobile phone chat interface special effect code. As follows:

Download Online Preview source code

Implementation code.

Html code:

<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">                              <span class="contact__name">Ethan Hawke</span>               <span class="contact__status online"></span>           </div>           <div class="contact">                              <span class="contact__name">Natalie Portman</span>               <span class="contact__status online"></span>           </div>           <div class="contact">                              <span class="contact__name">Kevin Spacey</span>               <span class="contact__status online"></span>           </div>           <div class="contact">                              <span class="contact__name">Rosamund Pike</span>               <span class="contact__status online"></span>           </div>           <div class="contact">                              <span class="contact__name">Robert Redford</span>               <span class="contact__status online"></span>           </div>           <div class="contact">                              <span class="contact__name">Scarlett Johansson</span>               <span class="contact__status online"></span>           </div>           <div class="contact">                              <span class="contact__name">Tom Cruise</span>               <span class="contact__status"></span>           </div>           <div class="contact">                              <span class="contact__name">Eva Green</span>               <span class="contact__status"></span>           </div>           <div class="contact">                              <span class="contact__name">Paul Newman</span>               <span class="contact__status"></span>           </div>           <div class="contact">                              <span class="contact__name">Thomas Break</span>               <span class="contact__status"></span>           </div>           <div class="search">                              <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='js/stopExecutionOnTimeout.js?t=1'></script>   <script type="text/javascript" src='js/jquery.min.js'></script>   <script type="text/javascript" src="js/main.js"></script>

Via: http://www.w2bc.com/article/61169