制作唯美交互的网页图集

任务描述

考验的 flexbox 的时候到来啦！如何使用 flex 布局制作一份赏心悦目的 Web 图集。在此过程中，你会学习和实践 flexbox 和 css 过渡效果，来大显身手吧。

任务效果图：

任务目的

CSS

1. 熟练掌握和运用 flexbox 的相关知识。
2. 掌握 transform 的相关属性（例如：translate() 等）
3. 掌握 transition 的相关用法

JavaScript

1. 熟练掌握 classList 的相关方法
2. 掌握 addEventListener() 方法的使用
3. 理解函数解耦，使一个函数只做一件事
4. 了解 Array.prototype.includes() 方法的使用