思维泡泡css效果-html代码-BFW代码库

思维泡泡css效果

代码语言：html

所属分类：其他

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

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

<title> Pure CSS Thought Bubbles</title>
<style>
      body {
  background-color:orange;
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
  margin:0;
  height:100vh;
  align-items:center;
  align-content:center;
}

.thought {
  display:flex;
  background-color:#fff;
  padding:20px;
  border-radius:30px;
  min-width:40px;
  max-width:220px;
  min-height:40px;
  margin:20px;
  position:relative;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.thought:before,
.thought:after {
  content:"";
  background-color:#fff;
  border-radius:50%;
  display:block;
  position:absolute;
  z-index:-1;
}
.thought:before {
  width:44px;
  height:44px;
  top:-12px;
  left:28px;
  box-shadow:-50px 30px 0 -12px #fff;
}
.thought:after {
  bottom:-10px;
  right:26px;
  width:30.........完整代码请登录后点击上方下载按钮下载查看