单个div+css实现脾气精酿酒杯效果代码-html代码-BFW代码库

单个div+css实现脾气精酿酒杯效果代码

代码语言：html

代码描述：单个div+css实现脾气精酿酒杯效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: var(--bg);
  --bg: rgb(70, 206, 127);
  --bg-tr:rgba(70, 206, 127,0);
  --yellow: rgb(243, 228, 18);
  --black-tr: rgba(0, 0, 0, 0.2);
  --black-tr-2: rgba(136, 134, 12, 0.123);
  --white: #fff;
  --white-tr: rgba(247, 234, 234, 0.5);
}

.brew {
  position: relative;
  width: 100vmin;
  height: 100vmin;
  margin: 0;
  background: radial-gradient(circle, var(--white-tr) 50%, var(--bg-tr) 51%) 45% 23%/3% 3% no-repeat, radial-gradient(circle, var(--white-tr) 50%, var(--bg-tr) 51%) 40% 22%/4% 4% no-repeat, radial-gradient(circle, var(--white-tr) 50%, var(--bg-tr) 51%) 58% 22%/3% 3% no-repeat, radial-gradient(circle, var(--black-tr-2) 50%, var(--bg-tr) 51%) 58% 41%/3% 3% no-repeat, radial-gradient(circle, var(--black-tr-2) 50%, var(--bg-tr) 51%) 38% 41%/3% 3% no-repeat, radial-gradient(circle, var(--black-tr-2) 50%, var(--bg-tr) 51%) 38% 78%/3% 3% no-repeat, radial-gradient(circle, var(--black-tr-2) 50%, var(--bg-tr) 51%) 42% 68%/1% 1% no-repeat, radial-gradient(circle, v.........完整代码请登录后点击上方下载按钮下载查看