一种引起浏览者探索兴趣的方法是,页面打开之后并不马上把所有内容都呈现给用户,而是隐藏其中的一部分内容,其他内容则需要用户交互之后才展示出来。这种方式很合适那些小众的、要营造艺术氛围的网站,通过特效来展现后续内容,有一种与用户对话的感觉。本作品就是采用这样的方式,当页面加载之后先把图片遮住,然后当鼠标移动到元素之上时,图片才展现出来。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
源代码下载
每日前端实战系列的全部源代码请从 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%;
}
效果如