本作品用到的4张图片可以从以下地址下载。https://assets.codepen.io/947...https://assets.codepen.io/947...https://assets.codepen.io/947...https://assets.codepen。io/947...2.基本布局将页面背景色设置为深灰色，使容器居中。身体{背景色：#222;保证金：0；高度：100vh；显示：弹性；对齐项目：居中；justify-content:center;}设置图片大小，使用相对单位em。.item{宽度：18em;height:12em;}.item.picture{width:100%;}效果如下图所示：3.图片遮罩特效因为先处理了遮罩效果，所以暂时不用的文字被隐藏，以避免干扰。.item.title{display:none;}使用.mask元素为图像添加遮罩。mask的大小是一个20em*20em的大圆圈，底色暂为半透明醒目的黄色，方便开发过程中观察。.item{位置：相对；显示：弹性；对齐项目：居中；证明内容：中心；}.item.mask{位置：绝对；宽度：20em；高度：20em；背景色：hsla(60,100%,50%,0.7);border-radius:50%;}效果如下图：上面只是测试遮罩的大小，把刚才的代码注释掉，使用box-shadow来实现我们真正需要的遮罩效果.这个遮罩层的大小是50em*50em，比图像本身大很多，但是它的大部分区域都是内阴影，遮罩下的图像是在内阴影内显露出来的。内阴影的大小是15em，也就是内阴影的半径，所以内阴影的直径是30em，遮罩元素的宽高是50em减去遮罩的30em，剩下的就是20em，这和刚才测试的口罩尺寸是一样的。.item.mask{/*width:20em;*//*height:20em;*//*background-color:hsla(60,100%,50%,0.7);*/width:50em;高度：50em；颜色：hsla(60,100%,50%,0.7);box-shadow:inset00015em;}效果如下图：尝试添加鼠标悬停效果。注意这里元素上的内阴影大小设置为25em，也就是内阴影的半径大小，那么阴影的直径就是50em，也就是和mask本身大小一样，也就是说默认情况下，整个图像被内部阴影覆盖；当鼠标悬停时，内部阴影变小，显示遮罩下的图像。另外，在mask层中添加pointer-events:none属性，防止mask层响应鼠标事件。.item.mask{box-shadow:inset00025em;过渡：框阴影0.3s；pointer-events:none;}.item:hover.mask{box-shadow:inset00015em;}然后向下创建鼠标滑动时遮罩跟随的效果。首先将蒙版移动到图片的左上角。mask的高度为50em，top:-25em是将mask的水平中心线与图片的上边缘对齐；同理，left:-25em是将mask的垂直中心线与图片的左侧对齐，两者叠加，即mask的中心与图片的左上角对齐。.item.mask{顶部：-25em;left:-25em;}添加一个脚本，将mousemove事件绑定到.item元素上，这样当鼠标在.item元素上滑动时，.mask元素就会滑动。window.onload=initfunctioninit(){letitems=document.querySelectorAll('.item')items.forEach((item)=>{item.addEventListener('mousemove',e=>{letmask=item.querySelector('.mask')mask.style.transform='translate('+e.offsetX+'px,'+e.offsetY+'px)'})})}至此主要效果已经完成，接下来增强效果。将图片原始尺寸略微增大，鼠标悬停时恢复图片尺寸。这个效果就是当鼠标进入图片区域时，图片可以“扭曲摇晃”，增强交互效果。.item.picture{转换：比例（1.1）；transition:0.3s;}.item:hover.picture{transform:scale(1);}鼠标悬停和滑动效果完成。下面几行代码是一些收尾工作。使用overflow:hidden属性将图片外的部分隐藏起来，给容器加一点圆角，遮罩的颜色改为不透明的灰色。.container{border-radius:0.3em;}.item{overflow:hidden;}.item.mask{/*color:hsla(60,100%,50%,0.7);*/color:#333;}效果如下图所示：4.文字排版及特效接下来对文字进行处理。先显示文字，除了注释掉display:none外，还必须设置它的z-index，使其显示在遮罩层上方，然后取消它的鼠标事件，以免影响鼠标滑动效果。.item.title{/*显示：无；*/位置：绝对；颜色：#777；z-索引：1；pointer-events:none;}设置文本样式。.item.title{字体系列：无衬线字体；字体粗细：粗体；text-transform:uppercase;}添加文字效果，当鼠标滑入图片时，隐藏文字。.item.title{transition:0.2s;}.item:hover.title{opacity:0;}效果如下图所示：至此，单图的效果就完成了。5.对多张图片应用特效，添加多个.item元素。切换