js+css实现鼠标交互移动卡片内树视觉差异效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现鼠标交互移动卡片内树视觉差异效果代码

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

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

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

  
  
  
  
<style>
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  transform-style: preserve-3d;
  font-size: min(50vw, 50vh);
  overflow: hidden;
  --zoom: 1;
  --bg7: url("//repo.bfw.wiki/bfwrepo/images/skull/tree7.png");
  --bg6: url("//repo.bfw.wiki/bfwrepo/images/skull/tree6.png");
  --bg5: url("//repo.bfw.wiki/bfwrepo/images/skull/tree5.png");
  --bg4: url("//repo.bfw.wiki/bfwrepo/images/skull/tree4.png");
  --bg3: url("//repo.bfw.wiki/bfwrepo/images/skull/tree3.png");
  --bg2: url("//repo.bfw.wiki/bfwrepo/images/skull/tree2.png");
  --bg1: url("//repo.bfw.wiki/bfwrepo/images/skull/tree1.png");
}
body #oneDiv {
  font-size: calc(1em * var(--zoom));
  --roty: 20deg;
  --rotx: 20deg;
  width: 2em;
  height: 2em;
  transform: rotateX(calc(var(--roty) * -1)) rotateY(var(--rotx));
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -ms-interpolation-mode: nearest-neighbor;
      image-rendering: -moz-crisp-edges;
      image-rendering: pixelated;
  background:  calc(50% - sin(var(--rotx)) * (0.01em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.01em - 70em / 100000)) / 1.8001em 1.8001em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.02em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.02em - 70em / 100000)) / 1.8002em 1.8002em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.03em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.03em - 70em / 100000)) / 1.8003em 1.8003em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.04em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.04em - 70em / 100000)) / 1.8004em 1.8004em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.05em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.05em - 70em / 100000)) / 1.8005em 1.8005em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.06em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.06em - 70em / 100000)) / 1.8006em 1.8006em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.07em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.07em - 70em / 100000)) / 1.8007em 1.8007em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.08em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.08em - 70em / 100000)) / 1.8008em 1.8008em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.09em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.09em - 70em / 100000)) / 1.8009em 1.8009em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.1em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.1em - 70em / 100000)) / 1.801em 1.801em var(--bg7) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.11em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.11em - 70em / 100000)) / 1.8011em 1.8011em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.12em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.12em - 70em / 100000)) / 1.8012em 1.8012em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.13em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.13em - 70em / 100000)) / 1.8013em 1.8013em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.14em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.14em - 70em / 100000)) / 1.8014em 1.8014em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.15em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.15em - 70em / 100000)) / 1.8015em 1.8015em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.16em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.16em - 70em / 100000)) / 1.8016em 1.8016em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.17em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.17em - 70em / 100000)) / 1.8017em 1.8017em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.18em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.18em - 70em / 100000)) / 1.8018em 1.8018em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.19em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.19em - 70em / 100000)) / 1.8019em 1.8019em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.2em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.2em - 70em / 100000)) / 1.802em 1.802em var(--bg6) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.21em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.21em - 70em / 100000)) / 1.8021em 1.8021em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.22em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.22em - 70em / 100000)) / 1.8022em 1.8022em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.23em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.23em - 70em / 100000)) / 1.8023em 1.8023em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.24em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.24em - 70em / 100000)) / 1.8024em 1.8024em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.25em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.25em - 70em / 100000)) / 1.8025em 1.8025em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.26em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.26em - 70em / 100000)) / 1.8026em 1.8026em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.27em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.27em - 70em / 100000)) / 1.8027em 1.8027em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.28em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.28em - 70em / 100000)) / 1.8028em 1.8028em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.29em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.29em - 70em / 100000)) / 1.8029em 1.8029em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.3em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.3em - 70em / 100000)) / 1.803em 1.803em var(--bg5) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.31em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.31em - 70em / 100000)) / 1.8031em 1.8031em var(--bg4) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.32em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.32em - 70em / 100000)) / 1.8032em 1.8032em var(--bg4) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.33em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.33em - 70em / 100000)) / 1.8033em 1.8033em var(--bg4) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.34em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.34em - 70em / 100000)) / 1.8034em 1.8034em var(--bg4) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.35em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.35em - 70em / 100000)) / 1.8035em 1.8035em var(--bg4) no-repeat, linear-gradient(#00000003, #00000003), calc(50% - sin(var(--rotx)) * (0.36em - 70em / 100000)) calc(50% - sin(var(--roty)) * (0.36em - 70em / 100000)) / 1.8036em 1.........完整代码请登录后点击上方下载按钮下载查看