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

代码语言：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:#ccc;border-width: .3px;}
#glass-top-edge{top:3%;height:10%;border-style:none solid none none;border-color:#ccc;border-width: .1px;}
#pims-surface{top:10%;border-color:orange;border-width: .9px;background-image:linear-gradient(transparent ,rgba(200,100,0,.3) );}
#glass-body{width:100%;height:65%;top:10%;border-style:none solid solid none;border-radius:0% 0% 10% 10%;background-image:linear-gradient(transparent , rgba(200,100,0,.15),rgba(200,100,0,.15),rgba(200,100,0,.15),rgba(200,100,0,.15), transparent );border-color:#ccc;border-width: .3px;}
 .bubbles{top:15%;left:0%;width:100%;height:70%;}
 
#base1{top:71%;border-color:#ccc;border-width: .3px;}
#baseEdge{width:85%;left:7.5%;top:75%;height:3.5%;border-style:none solid none solid;border-color:#ccc;border-width: 1.5px;}
#base2{top:75%;border-color:#ccc;border-width: .3px;}
.base{width:85%;left:7.5%;background-image:linear-gradient(transparent,rgba(240,240,240,.7));}

/* ice cube */
#cube-box{grid-area:2 /2 /span 1/span 1;width:100%;height:100%;}
.ice{border-radius:20%;}
#ice-cube{width:15vmin;height:15vmin;top:45%;left:38%;}
#ice-cube div{font-size:50px;
opacity:.2;
background:rgb(255,200,100);
  position:absolute;
  width:15vmin;
  height:15vmin;
  border:1px solid #ccc;
  
  box-shadow:inset 0 0 20px rgba(255,255,255); 
  }
#ice-cube .face1{transform:translateZ(7.5vmin);}
#ice-cube .face2{transform:rotateY(90deg)translateZ(7.5vmin);}
#ice-cube .face3{transform:rotateY(90deg)rotateX(90deg)translateZ(7.5vmin);}
#ice-cube .face4{transform:rotateY(180deg)rotateZ(90deg)translateZ(7.5vmin);}
#ice-cube .face5{-webkit-transform:rotateY(-90deg)rotateZ(90deg)translateZ(7.5vmin);}
#ice-cube .face6{transform:rotateX(-90deg)translateZ(7.5vmin);}

@keyframes cucumber-drop{
0%{top:-50%;}
  
  5%{top:34%;}
7.5%{top:30%;}
 10%{top:33%;}
15%{top:30%;}
20%{top:32%;}
25%{top:30%;}
30%{top:31%;}
35%{top:30%;}
40%{top:31%;}
45%{top:30%;}
50%{top:31%;}
55%{top:30%;}
60%{top:31%;} 
65%{top:30%;}
  80%{top:31%;}
  100%{top:30%;}
}


	@keyframes spincube{
0%{transform:rotateY(-60deg)rotateZ(30deg);}
33%{transform:rotateY(45deg)rotateZ(-15deg);}
66%{transform:rotateY(-20deg)rotateZ(20deg);}

100%{transform:rotateY(37deg)rotateZ(-53deg);} 
}
#ice-cube{transform:rotateY(-60deg)rotateZ(30deg);-webkit-animation-name:spincube;
  animation-timing-function:ease-in-out;
  animation-direction: alternate;
  animation-iteration-count:infinite;
  animation-duration:26s;
  transform-style:preserve-3d;
  transform-origin:10vw 10vw 0;
}

@keyframes strawberry-rock{
0%{transform:rotate(45deg);top:54%;}
30%{transform:rotate(55deg);top:56%;}
70%{transform:rotate(50deg);}
100%{transform:rotate(55deg);top:54%;}
}
    </style>

</head>
<body translate="no">
<body onload="bubbles('bubbles1',10,0);bubbles('bubbles2',7,-.5);bubbles('bubbles3',17,-1);">
<div id="background">

<div id='glass-tumbler'>
<div id='rim' class='PA oval'></div>
<div id='glass-top-edge' class='PA edge'></div>
<div id='pims-surface' class='PA oval'></div>
<div id='glass-body' class='PA'></div>
<div id='bubbles1' class='bubbles PA'&g.........完整代码请登录后点击上方下载按钮下载查看