捏史莱姆

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>捏史莱姆</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{
  margin: 0;
  height: 100vh;
  background: #f8ecff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tip{
  font-size:18px;
  color:#774b94;
  margin-bottom:20px;
}
#slime{
  width: 220px;
  height: 220px;
  background: #d8b8ee;
  border-radius: 50%;
  box-shadow: 0 0 30px #c49fe0;
  touch-action: none;
  transition: transform 0.08s ease-out;
}
</style>
</head>
<body>
<div class="tip">拖动史莱姆随便捏一捏🫧</div>
<div id="slime"></div>
<script>
const slime = document.getElementById('slime');
let isTouch = false;
let startX, startY;
let scaleX = 1;
let scaleY = 1;

slime.addEventListener('touchstart', (e)=>{
  e.preventDefault();
  isTouch = true;
  const t = e.touches[0];
  startX = t.clientX;
  startY = t.clientY;
  if(navigator.vibrate) navigator.vibrate(20);
})

slime.addEventListener('touchmove', (e)=>{
  if(!isTouch) return;
  e.preventDefault();
  const t = e.touches[0];
  const dx = (t.clientX - startX)/40;
  const dy = (t.clientY - startY)/40;
  scaleX = 1 + dx;
  scaleY = 1 + dy;
  slime.style.transform = `scale(${scaleX}, ${scaleY})`
})

slime.addEventListener('touchend', ()=>{
  isTouch = false;
  // 回弹变回圆圆的
  slime.style.transition = 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)';
  slime.style.transform = 'scale(1,1)';
  setTimeout(()=>slime.style.transition='0.08s ease-out',300)
})
</script>
</body>
</html>