分享一款基于html5 svg左侧滑出手机聊天框代码是一款基于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="img/1.png" alt="" class="contact__photo" />
                <span class="contact__name">Ethan Hawke</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="img/2.png" alt="" class="contact__photo" />
                <span class="contact__name">Natalie Portman</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="img/3.png" alt="" class="contact__photo" />
                <span class="contact__name">Kevin Spacey</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="img/4.png" alt="" class="contact__photo" />
                <span class="contact__name">Rosamund Pike</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="img/5.png" alt="" class="contact__photo" />
                <span class="contact__name">Robert Redford</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="img/6.png" alt="" class="contact__photo" />
                <span class="contact__name">Scarlett Johansson</span>
                <span class="contact__status online"></span>
            </div>
            <div class="contact">
                <img src="img/7.png" alt="" class="contact__photo" />
                <span class="contact__name">Tom Cruise</span>
                <span class="contact__status"></span>
            </div>
            <div class="contact">
                <img src="img/8.png" alt="" class="contact__photo" />
                <span class="contact__name">Eva Green</span>
                <span class="contact__status"></span>
            </div>
            <div class="contact">
                <img src="img/9.png" alt="" class="contact__photo" />
                <span class="contact__name">Paul Newman</span>
                <span class="contact__status"></span>
            </div>
            <div class="contact">
                <img src="img/1.png" alt="" class="contact__photo" />
                <span class="contact__name">Thomas Break</span>
                <span class="contact__status"></span>
            </div>
            <div class="search">
                <img src="img/t8TeL1S.png" alt="" 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='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

在线预览    源码下载