matterjs模拟流体杯子倒牛奶物理效果代码

代码语言:html

所属分类:其他

代码描述:matterjs模拟流体杯子倒牛奶物理效果代码,移动鼠标来把杯子放在牛奶口下面接牛奶。

代码标签: matter 模拟 流体 杯子 牛奶 物理

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

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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');

html, body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #c3e6e4;
  position: relative;
  z-index: 1;
}

header {
  font-family: 'Modak', cursive;
  position: absolute;
  right: 0;
  top: 1.2rem;
  writing-mode: vertical-rl;
  text-orientation:sideways;
  font-size: 20vh;
  color: #ffffff80;
}

#matter-canvas {
  width: 100%;
  height: 100%;
  filter: url(#gooey);
}

#carton, #glass {
  position: absolute;
  pointer-events: none;
}

#glass {
  width: 250px;
}

#carton {
  left: 0;
  top: 5px;
  z-index: -1;
  width: 150px;
  transform: translate(-20px, 0);
}
</style>



</head>

<body >
  w<header>MILK</header>
<canvas id="matter-canvas"></canvas>

<svg>
  <defs>
    <filter id="gooey" height="130%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 40 -3" result="goo" />
    </filter>
  </defs>
</svg>

<img id="carton" src="data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0