js+css实现鼠标点击逼真贴纸贴上动画代码-html代码-BFW代码库

js+css实现鼠标点击逼真贴纸贴上动画代码

代码语言：html

所属分类：其他

代码描述：js+css实现鼠标点击逼真贴纸贴上动画代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
body {
  height: 100%;
  margin: 0;
}
#stage {
  position: fixed;
  inset: 0;
  cursor: crosshair;
  z-index: 2;
}
.hint {
  position: fixed;
  top: 16px;
  color: #555;
  text-align: center;
  width: 100%;
}

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.sticker {
  position: absolute;
  user-select: none;
  pointer-events: auto;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.16))
    drop-shadow(0 5px 10px rgba(0, 0, 0, 0.01));

  --fold: calc(var(--minp) + var(--span) * var(--p));
  --half-plane: polygon(
    calc((var(--fold) * var(--u0) + var(--big) * var(--w0)) * 1px)
      calc((var(--fold) * var(--u1) + var(--big) * var(--w1)) * 1px),
    calc((var(--fold) * var(--u0) - var(--big) * var(--w0)) * 1px)
      calc((var(--fold) * var(--u1) - var(--big) * var(--w1)) * 1px),
    calc(
        (
            var(--fold) * var(--u0) - var(--big) * var(--w0) - var(--big) *
              var(--u0)
          ) *
          1px
      )
      calc(
        (
            var(--fold) * var(--u1) - var(--big) * var(.........完整代码请登录后点击上方下载按钮下载查看