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

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

代码语言：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).........完整代码请登录后点击上方下载按钮下载查看