svg聊天即时通讯客服界面布局效果
代码语言：html
所属分类：其他
代码描述：svg聊天即时通讯客服界面布局效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
<style>
*, *: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: 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);
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: flex;
-webkit-box-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: flex;
-webkit-box-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);
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);
transform: rotate(-45deg);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-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("//repo.bfw.wiki/bfwrepo/image/5fb60e648735a.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);
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;
}
}
</style>
</head>
<body translate="no">
<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="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
<span class="contact__name">Ethan Hawke</span>
<span class="contact__status online"></span>
</div>
<div class="contact">
<img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
<span class="contact__name">Natalie Portman</span>
<span class="contact__status online"></span>
</div>
<div class="contact">
<img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
<span class="contact__name">Kevin Spacey</span>
<span class="contact__status online"></span>
</div>
<div class="contact">
<img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
<span class="contact__name">Rosamund Pike</span>
<span class="contact__status online"></span>
</div>
<div class="contact">
<img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90" alt="" class="contact__photo" />
<span class="contact__name">Robert Redford</span>
<span class="contact__status online"></span>
</div>
<div class="contact">
<img src="//repo.bfw.wiki/bfwrepo/image/5e0c6f962a0d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_40,h_40,/quality,q_90".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0