纯css实现聊天机器人动画效果-html代码-BFW代码库

纯css实现聊天机器人动画效果

代码语言：html

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


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

<style>
* {
  margin: 0 auto;
  -webkit-user-select: none;
}
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #F6F6F6;
}
.container {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  height: 500px;
  width: 500px;
  animation: up-down 7.5s infinite ease-in-out;
}
.container #chatbot {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  width: 150px;
  height: 85px;
  border: 12px solid #3D3E45;
  border-radius: 5rem;
}
.container #chatbot-corner {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  top: 105px;
  left: -65px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 25px solid #3D3E45;
  transform: rotate(140deg);
}
.container #antenna {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  top: -125px;
  height: 20.........完整代码请登录后点击上方下载按钮下载查看