三、呈现人的正常状态，使元素显示在页面中央：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；overflow:hidden;}使用图片css.png作为容器的背景图片.person:.person{width:320px;高度：537px；background-image:url(css.png);}效果如下：<图1>4.呈现人的骨架使用图片html.png作为元素.person.inside的背景图。.person.inside{宽度：100%；高度：100%；背景图像：url（html.png）；background-position:center;}效果如下：<图片2>给图片添加一个5px的灰色边框。.person.inside{box-sizing:border-box;边框：5px纯灰色；border-radius:0.3em;}效果如下图：<图3>缩小的边框高度为100px，位于容器的中上部，是一个滑动的透视窗口未来的涨跌。.person{position:relative;}.person.inside{/*height:100%;*/height:100px;位置：绝对；top:25%;}效果如下：<图4>仔细看上图，是有误，透视窗是在人的胸口，但是通过透视显示的区域是人的腰部。所以你需要使用background-attachment:fixed;将图像锁定在固定位置。请注意这个属性值是整个作品的核心，否则透视窗口不会有滑动效果。.person.inside{background-attachment:fixed;}效果如下图：<图5>至此静态布局完成。5、透视窗口的滑动效果接下来处理透视窗口跟随鼠标的滑动效果。程序入口是init函数，里面声明了person和inside两个变量，分别代表它们对应的DOM元素。window.onload=initfunctioninit(){varperson=document.querySelector('.person')varinside=document.querySelector('.person.inside')}将mousemove事件绑定到person元素上，当事件触发时,更新里面元素的top属性值，形成滑动效果。functioninit(){person.addEventListener('mousemove',function(e){inside.style.top=getTopPosition(e.offsetY)});}top属性值由getTopPosition()函数计算得到，其中offset值为透视窗口高度的一半，表示透视窗口滑动时，鼠标指针在透视窗口的中间。检测到滑动位置没有超出容器后，返回到添加单位px的位置。functiongetTopPosition(y){constwindowHeight=100varoffset=windowHeight/2if(y(Number.parseInt(window.getComputedStyle(person).height))-offset)returnreturny-offset+'px'}现在刷新页面，看到已经有滑动效果了，但是很不流畅。这是因为子元素.inside位于容器.person之上，子元素的事件会先被触发。为此，我们使用pointer-events:none;禁止子元素响应鼠标事件。此外，鼠标指针显示为一个图标，表示它是可移动的。.person{cursor:move;}.person.inside{pointer-events:none;}至此，本作核心功能开发完成。6.切换透视图接下来添加切换透视内容的功能。在DOM中添加2个复选框，选择是看穿html（人体骨骼）还是看穿js（人体神经）。HTMLJavaScript