js实现水杯气泡效果-html代码-BFW代码库

js实现水杯气泡效果

代码语言：html

所属分类：粒子

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


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

<title>pimm’s</title>
<style>
      body{margin:0;padding:0;}
#background{
	height:100vh;width:100vw;
	background-image:linear-gradient(black,grey);
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-template-rows:15% 1fr 5%;
}
.PA{position:absolute;width:100%;}
/* cucumber*/
#cucumber{background:radial-gradient(white , rgb(200,255,100),green);width:15vmin;height:15vmin;top:-20%;left:45%;dispay:grid;border-radius:50%;border:dashed green .8vmin;grid-area:2 /2 /span 1/span 1;animation-name:cucumber-drop;
    animation-iteration-count:1;
    animation-timing-function:ease-in-out;
    animation-duration: 20s;
    animation-delay:3s;
    animation-fill-mode:forwards;
   
    }
#cucumberSlice{width:100%;height:100%;display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(4, 1fr);}  
.section{border:solid white .5vmin;width:100%;height:60%;grid-row:3;grid-column:3;background:rgba(200,200,200,.3);}

/* strawberry */
#strawberry-Box{grid-area:2 /2 /span 1/span 1;}
#strawberry{transform:rotate(45deg) ;width:15vmin;height:15vmin;background:red;border-radius:30%;box-shadow:inset -1.5vmin -1.5vmin 5vmin black;top:60%;left:50%;animation-name:strawberry-rock;
    animation-direction: alternate;
    animation-iteration-count:infinite;
    animation-duration:6s;
 
  }

/*glass tumbler*/
#glass-tumbler{width:100%;height:100%;grid-area:2 /2 /span 1/span 1;position:relative;}
#bubble-maker{width:100%; height:90%;}

.oval{height:7%;border-radius:50%;}
#rim{border-style: double;top:0%;border-color:#cc.........完整代码请登录后点击上方下载按钮下载查看