<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet prefetch' href='http://fonts.useso.com/css?family=Open+Sans'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<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>
</body>
</html>
html5 svg手机聊天界面弹性动画聊天框特效.zip
需积分: 9 180 浏览量
2019-08-08
10:58:16
上传
评论
收藏 80KB ZIP 举报
html5 svg手机聊天界面弹性动画聊天框特效.zip （22个子文件） 
css 
default.css 6KB styles.css 8KB normalize.css 2KB img 
5.png 4KB 9.png 4KB t8TeL1S.png 430B 1.png 4KB cM3yCT9.png 589B 6.png 4KB 2.png 4KB 7.png 3KB 4.png 4KB 8.png 4KB 3.png 4KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB js jquery.min.js 94KB main.js 6KB stopExecutionOnTimeout.js 2KB资源评论
