以下是 html5 svg左侧滑出手机聊天框滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
JS代码(main.js):
$(document).ready(function(){
var $svg = $(".sidebar"),$demo = $(".demo"),$path = $(".s-path"),$sCont = $(".sidebar-content"),$chat = $(".chat"),demoTop = $demo.offset().top,demoLeft = $demo.offset().left,diffX = 0,curX = 0,finalX = 0,frame = 1000 / 60,animTime = 600,sContTrans = 200,animating = false;
var easings ={
smallElastic:function(t,b,c,d){
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(33*tc*ts + -106*ts*ts + 126*tc + -67*ts + 15*t);
}
,inCubic:function(t,b,c,d){
var tc = (t/=d)*t*t;
return b+c*(tc);
}
}
;
function createD(top,ax,dir){
return "M0,0 "+top+",0 a"+ax+",250 0 1,"+dir+" 0,500 L0,500";
}
var startD = createD(50,0,1),midD = createD(125,75,0),finalD = createD(200,0,1),clickMidD = createD(300,80,0),clickMidDRev = createD(200,100,1),clickD = createD(300,0,1),currentPath = startD;
function newD(num1,num2){
var d = $path.attr("d"),num2 = num2 || 250,nd = d.replace(/\ba(\d+),(\d+)\b/gi,"a" + num1 + "," + num2);
return nd;
}
function animatePathD(path,d,time,handlers,callback,easingTop,easingX){
var steps = Math.floor(time / frame),curStep = 0,oldArr = currentPath.split(" "),newArr = d.split(" "),oldTop = +oldArr[1].split(",")[0],topDiff = +newArr[1].split(",")[0] - oldTop,nextTop,nextX,easingTop = easings[easingTop] || easings.smallElastic,easingX = easings[easingX] || easingTop;
$(document).off("mousedown mouseup");
function animate(){
curStep++;
nextTop = easingTop(curStep,oldTop,topDiff,steps);
console.log(curStep+" "+oldTop+ " "+topDiff+" "+steps);
nextX = easingX(curStep,curX,finalX-curX,steps);
oldArr[1] = nextTop + ",0";
oldArr[2] = "a" + Math.abs(nextX) + ",250";
oldArr[4] = (nextX >= 0) ? "1,1":"1,0";
$path.attr("d",oldArr.join(" "));
if (curStep > steps){
curX = 0;
diffX = 0;
$path.attr("d",d);
currentPath = d;
if (handlers) handlers1();
if (callback) callback();
return;
}
requestAnimationFrame(animate);
}
animate();
}
function handlers1(){
$(document).on("mousedown touchstart",".s-path",function(e){
var startX = e.pageX || e.originalEvent.touches[0].pageX;
$(document).on("mousemove touchmove",function(e){
var x = e.pageX || e.originalEvent.touches[0].pageX;
diffX = x - startX;
if (diffX < 0) diffX = 0;
if (diffX > 300) diffX = 300;
curX = Math.floor(diffX/2);
$path.attr("d",newD(curX));
}
);
}
);
$(document).on("mouseup touchend",function(){
$(document).off("mousemove touchmove");
if (animating) return;
if (!diffX) return;
if (diffX < 40){
animatePathD($path,newD(0),animTime,true);
}
else{
animatePathD($path,finalD,animTime,false,function(){
$sCont.addClass("active");
setTimeout(function(){
$(document).on("click",closeSidebar);
}
,sContTrans);
}
);
}
}
);
}
handlers1();
function closeSidebar(e){
if ($(e.target).closest(".sidebar-content").length || $(e.target).closest(".chat").length) return;
if (animating) return;
animating = true;
$sCont.removeClass("active");
$chat.removeClass("active");
$(".cloned").addClass("removed");
finalX = -75;
setTimeout(function(){
animatePathD($path,midD,animTime/3,false,function(){
$chat.hide();
$(".cloned").remove();
finalX = 0;
curX = -75;
animatePathD($path,startD,animTime/3*2,true);
animating = false;
}
,"inCubic");
}
,sContTrans);
$(document).off("click",closeSidebar);
}
function moveImage(that){
var $img = $(that).find(".contact__photo"),top = $img.offset().top - demoTop,left = $img.offset().left - demoLeft,$clone = $img.clone().addClass("cloned");
$clone.css({
top:top,left:left}
);
$demo.append($clone);
$clone.css("top");
$clone.css({
top:"1.8rem",left:"25rem"}
);
}
function ripple(elem,e){
var elTop = elem.offset().top,elLeft = elem.offset().left,x = e.pageX - elLeft,y = e.pageY - elTop;
var $ripple = $("<div class='ripple'></div>");
$ripple.css({
top:y,left:x}
);
elem.append($ripple);
}
$(document).on("click",".contact",function(e){
if (animating) return;
animating = true;
$(document).off("click",closeSidebar);
var that = this,name = $(this).find(".contact__name").text(),online = $(this).find(".contact__status").hasClass("online");
$(".chat__name").text(name);
$(".chat__online").removeClass("active");
if (online) $(".chat__online").addClass("active");
ripple($(that),e);
setTimeout(function(){
$sCont.removeClass("active");
moveImage(that);
finalX = -80;
setTimeout(function(){
$(".ripple").remove();
animatePathD($path,clickMidD,animTime/3,false,function(){
curX = -80;
finalX = 0;
animatePathD($path,clickD,animTime*2/3,true,function(){
$chat.show();
$chat.css("top");
$chat.addClass("active");
animating = false;
}
);
}
,"inCubic");
}
,sContTrans);
}
,sContTrans);
}
);
$(document).on("click",".chat__back",function(){
if (animating) return;
animating = true;
$chat.removeClass("active");
$(".cloned").addClass("removed");
setTimeout(function(){
$(".cloned").remove();
$chat.hide();
finalX = 100;
animatePathD($path,clickMidDRev,animTime/3,false,function(){
curX = 100;
finalX = 0;
animatePathD($path,finalD,animTime*2/3,true,function(){
$sCont.addClass("active");
$(document).on("click",closeSidebar);
animating = false;
}
);
}
,"inCubic");
}
,sContTrans);
}
);
$(window).on("resize",function(){
demoTop = $demo.offset().top;
demoLeft = $demo.offset().left;
}
);
}
);
JS代码(stopExecutionOnTimeout.js):
"use strict";
"object"!=typeof window.CP&&(window.CP={
}
),window.CP.PenTimer={
programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{
}
,_loopTimers:{
}
,START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){
this._loopExits[o]=!0}
,shouldStopLoop:function(o){
if(this.programKilledSoStopMonitoring)return!0;
if(this.programNoLongerBeingMonitored)return!1;
if(this._loopExits[o])return!1;
var t=this._getTime();
if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;
var i=t-this.timeOfFirstCallToShouldStopLoop;
if(i<this.START_MONITORING_AFTER)return!1;
if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;
try{
this._checkOnInfiniteLoop(o,t)}
catch(n){
return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}
return!1}
,_sendErrorMessageToEditor:function(){
try{
if(this._shouldPostMessage()){
var o={
action:"infinite-loop",line:this._findAroundLineNumber()}
;
parent.postMessage(JSON.stringify(o),"*")}
else this._throwAnErrorToStopPen()}
catch(t){
this._throwAnErrorToStopPen()}
}
,_shouldPostMessage:function(){
return document.location.href.match(/boomerang/)}
,_throwAnErrorToStopPen:function(){
throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."}
,_findAroundLineNumber:function(){
var o=new Error,t=0;
if(o.stack){
var i=o.stack.match(/boomerang\S+:(\d+):\d+/);
i&&(t=i[1])}
return t}
,_checkOnInfiniteLoop:function(o,t){
if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;
var i=t-this._loopTimers[o];
if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop:"+o}
,_getTime:function(){
return+new Date}
}
,window.CP.shouldStopExecution=function(o){
return window.CP.PenTimer.shouldStopLoop(o)}
,window.CP.exitedLoop=function(o){
window.CP.PenTimer.exitedLoop(o)}
;
CSS代码(default.css):
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:1em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:5em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:3.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:3.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}
CSS代码(styles.css):
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;}
html,body{font-size:62.5%;height:100%;}
button,input{border:0;outline:none;}
body{background:-webkit-linear-gradient(45deg,#636f85,#6960a0);background:linear-gradient(45deg,#636f85,#6960a0);}
.demo{position:absolute;top:50%;left:50%;margin-top:-25rem;margin-left:-15rem;width:30rem;height:50rem;box-shadow:0 1rem 5rem rgba(0,0,0,0.3);}
.static{height:100%;font-size:1.8rem;font-family:"Open Sans",Helvetica,Arial,sans-serif;background:#6D7ADA;}
.static:before,.static:after{content:"";position:absolute;left:7rem;width:2rem;height:2rem;margin-left:-1rem;margin-top:-1rem;border:2px solid #fff;border-left:none;border-bottom:none;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-animation:arrows 1.5s infinite;animation:arrows 1.5s infinite;}
.static:before{top:15rem;}
.static:after{top:35rem;}
.static__text{width:9rem;position:absolute;top:50%;left:50%;margin-left:-5rem;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);color:#fff;-webkit-perspective:1px;perspective:1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.sidebar-content{z-index:-1;position:absolute;top:0;left:0;width:20rem;height:100%;padding-top:1rem;opacity:0;-webkit-transition:opacity 200ms,z-index 0s 0s;transition:opacity 200ms,z-index 0s 0s;background-color:#E9EAF3;overflow:hidden;}
.sidebar-content.active{z-index:2;opacity:1;}
.contact{position:relative;width:100%;height:5rem;padding-left:1.7rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;cursor:pointer;overflow:hidden;}
.contact__photo{border-radius:50%;margin-right:1.5rem;}
.contact__name{font-size:1.2rem;font-family:"Open Sans",Helvetica,Arial,sans-serif;}
.contact__status{position:absolute;top:2.1rem;right:1.5rem;width:8px;height:8px;border:2px solid #00B570;border-radius:50%;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.contact__status.online{opacity:1;}
.search{position:absolute;bottom:0;left:0;width:100%;height:5.5rem;padding-left:1.5rem;background:#fff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
svg{overflow:visible;}
.sidebar{z-index:1;position:absolute;top:0;left:0;display:block;width:100%;height:100%;}
.s-path{cursor:-webkit-grab;cursor:grab;}
.cloned{position:absolute;z-index:10;-webkit-transition:top 0.3s,left 0.3s;transition:top 0.3s,left 0.3s;-webkit-transition-delay:0.2s;transition-delay:0.2s;-webkit-transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);transition-timing-function:cubic-bezier(0.55,0.055,0.675,0.19);}
.cloned.removed{-webkit-transition:opacity 0.2s 0;transition:opacity 0.2s 0;opacity:0;}
.chat{display:none;z-index:5;position:absolute;top:0;left:0;width:100%;height:100%;padding:2.5rem 0 5.5rem 2.5rem;-webkit-transition:opacity 200ms;transition:opacity 200ms;opacity:0;}
.chat.active{opacity:1;}
.chat.active:before{width:100%;}
.chat:before{content:"";position:absolute;top:0;left:0;width:100%;height:0.5rem;background:#1CC6AE;width:0;-webkit-transition:width 0.2s;transition:width 0.2s;}
.chat__back{position:relative;display:inline-block;width:2rem;height:2rem;margin-top:0.5rem;margin-left:-0.6rem;cursor:pointer;}
.chat__back:hover:before{-webkit-transform:translateX(-0.3rem) rotate(-45deg);-ms-transform:translateX(-0.3rem) rotate(-45deg);transform:translateX(-0.3rem) rotate(-45deg);}
.chat__back:before{content:"";position:absolute;display:block;top:0.4rem;left:0.6rem;width:1.2rem;height:1.2rem;border:2px solid #545675;border-right:none;border-bottom:none;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;}
.chat__status{position:absolute;top:2rem;right:6.5rem;font-size:1.2rem;font-family:"Open Sans",Helvetica,Arial,sans-serif;text-transform:uppercase;color:#B1A9A9;}
.chat__person{display:inline-block;position:absolute;top:3rem;right:6.5rem;font-size:2rem;font-family:"Open Sans",Helvetica,Arial,sans-serif;color:#36343D;}
.chat__online{position:absolute;top:50%;left:-1.5rem;margin-top:-3px;width:8px;height:8px;border:2px solid #00B570;border-radius:50%;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;}
.chat__online.active{opacity:1;}
.chat__messages{position:absolute;top:7.5rem;left:2.5rem;width:27.5rem;height:37rem;padding-right:2.5rem;overflow-y:auto;}
.chat__msgRow{margin-bottom:0.5rem;}
.chat__msgRow:after{content:"";display:table;clear:both;}
.chat__message{display:inline-block;max-width:60%;padding:1rem;font-size:1.4rem;font-family:"Open Sans",Helvetica,Arial,sans-serif;}
.chat__message.mine{color:#2B2342;border:1px solid #DFDFDF;}
.chat__message.notMine{float:right;color:#23244E;background:#E9EAF3;}
.chat__input{position:absolute;bottom:0;left:0;width:100%;height:5.5rem;padding:1rem 1rem 1rem 4rem;background-image:url("../img/cM3yCT9.png");background-repeat:no-repeat;background-position:1rem 1.5rem;background-color:#E9EAF3;color:#2B2342;font-size:1.4rem;font-family:"Open Sans",Helvetica,Arial,sans-serif;}
.ripple{position:absolute;width:10rem;height:10rem;margin-left:-5rem;margin-top:-5rem;background:rgba(0,0,0,0.4);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:animRipple 0.3s;animation:animRipple 0.3s;border-radius:50%;}
@-webkit-keyframes animRipple{to{-webkit-transform:scale(2.5);transform:scale(2.5);opacity:0;}
}
@keyframes animRipple{to{-webkit-transform:scale(2.5);transform:scale(2.5);opacity:0;}
}
@-webkit-keyframes arrows{to{-webkit-transform:translateX(100%) rotate(45deg);transform:translateX(100%) rotate(45deg);opacity:0;}
}
@keyframes arrows{to{-webkit-transform:translateX(100%) rotate(45deg);transform:translateX(100%) rotate(45deg);opacity:0;}
}
分享到QQ
分享到微博
微信扫一扫
