三维动态聊天窗口特效-html代码-BFW代码库

三维动态聊天窗口特效

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> Chat Interface</title>
<style>
      @import url("https://fonts.googleapis.com/css?family=Megrim");

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  /* center the phone in the viewport */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
  color: #fff;
  background: #2d2e40;
  /* perspective for the 3D transform properties */
  perspective: 500px;
}

/* fix the width of the wrapping container,
 the height is fixed for the section devoted to the chat, to crop out additional text messages
*/
.phone {
  width: 250px;
  font-size: 1.2rem;
  font-family: "Megrim", sans-serif;
  background: hsla(231, 12%, 86%, 0.1);
  padding: 0.5rem 0.75rem;
  /* initial 3D transform properties to give the sense of a rotated device */
  transform: translateZ(-40px) rotateX(4deg) rotateY(15deg);
  transf.........完整代码请登录后点击上方下载按钮下载查看