html中图片鼠标滑动的效果,《前端每日实战》第177号作品：多张图片的鼠标悬停和滑动特效...

一种引起浏览者探索兴趣的方法是，页面打开之后并不马上把所有内容都呈现给用户，而是隐藏其中的一部分内容，其他内容则需要用户交互之后才展示出来。这种方式很合适那些小众的、要营造艺术氛围的网站，通过特效来展现后续内容，有一种与用户对话的感觉。本作品就是采用这样的方式，当页面加载之后先把图片遮住，然后当鼠标移动到元素之上时，图片才展现出来。

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

代码解读

一、DOM 结构

容器名为 .container，其中包含一个名为 .item 的元素。

.item 元素则包含 3 个子元素，.picture 表示图片本身，.title 是图片上的文字，.mask 是用来制作遮罩效果的元素。

作品完成时，会有多个 .item 元素，但此时我们先只展示 1 张图片，待效果完成之后，再增加其他图片。

Toggle

二、基础布局

设置页面背景色为深灰色，令容器居中。body {

background-color: #222;

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

设置图片尺寸，用相对单位 em。.item {

width: 18em;

height: 12em;

}

.item .picture {

width: 100%;

}

效果如