svg+css布局实现清爽网页视频及时通话通讯聊天页面布局效果代码-html代码-BFW代码库

svg+css布局实现清爽网页视频及时通话通讯聊天页面布局效果代码

代码语言：html

代码描述：svg+css布局实现清爽网页视频及时通话通讯聊天页面布局效果代码，支持夜晚模式切换，支持多人视频、群聊等

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

button {
  outline: none;
  transition: .2s;
  cursor: pointer;
}
button:hover {
  opacity: .7;
}

body {
  --app-background: #eaebf5;
  --chat-background: #fff;
  --link-color: #c0c1c5;
  --navigation-bg: #fff;
  --navigation-box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2), 0 24px 20px -24px rgba(71, 82, 107, 0.1);
  --main-color: #3d42df;
  --message-bg: #f3f4f9;
  --message-bg-2: #3d42df;
  --message-text: #2c303a;
  --placeholder-text: #a2a4bc;
  --button-bg: #fff;
}

body.dark {
  --app-background: #262a42;
  --navigation-box-shadow: 0px 0px 8px 0px #282b33;
  --chat-background: #3c3f56;
  --message-bg: #2c3046;
  --message-text: rgba(255,255,255,0.8);
  --placeholder-text: #fff;
  --navigation-bg: #3c3f56;
  --button-bg: #3c3f56;
  --main-color: #6f74ff;
  --message-bg-2: #6f74ff;
}
body.dark .mic {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-mic-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M9 9v3a3 3 0 005.12 2.12M15 9.34V4a3 3 0 00-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 015 12v-2m14 0v2a7 7 0 01-.11 1.23M12 19v4M8 23h8'/%3E%3C/svg%3E%0A");
}
body.dark .camera {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-camera-off' viewBox='0 0 24 24'%3E%3Cpath d='M1 1l22 22M21 21H3a2 2 0 01-2-2V8a2 2 0 012-2h3m3-3h6l2 3h4a2 2 0 012 2v9.34m-7.72-2.06a4 4 0 11-5.56-5.56'/%3E%3C/svg%3E%0A");
}
body.dark .maximize {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize' viewBox='0 0 24 24'%3E%3Cpath d='M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3'/%3E%3C/svg%3E%0A");
}
body.dark .magnifier {
  color: #fff;
}
body.dark .chat-header {
  border-color: var(--message-bg);
}
body.dark .btn-close-right {
  color: #fff;
}

a {
  text-decoration: none;
}

.app-container {
  background-color: var(--app-background);
  width: 100%;
  height: 100%;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  transition: .2s;
}

.left-side {
  position: relative;
  padding: 16px;
  flex-basis: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.navigation {
  display: flex;
  flex-direction: column;
  background-color: var(--navigation-bg);
  padding: 24px;
  border-radius: 10px;
  box-shadow: var(--navigation-box-shadow);
}

.nav-link + .nav-link {
  margin-top: 32px;
}

.nav-link:hover svg {
  color: #3d42df;
}

.icon svg {
  width: 24px;
  height: 24px;
  color: var(--link-color);
  transition: .2s ease-in;
}

.right-side {
  margin-left: auto;
  flex.........完整代码请登录后点击上方下载按钮下载查看