css 马赛克_使用CSS和PHP创建动画图像马赛克

css 马赛克

As site information density grows, designers are challenged to create new ways of visualizing and navigating data. One way of providing an overview of site content is to display a grid of random thumbnail images, with each image corresponding to a site page or article. When used in the past, this kind of mosaic has been static, and often fails to communicate the dynamic, complex nature of a modern site.

随着站点信息密度的增长，设计师面临着创建可视化和导航数据新方法的挑战。 提供站点内容概述的一种方法是显示随机缩略图的网格，每个图像对应一个站点页面或文章。 过去使用时，这种马赛克是静态的，通常无法传达现代网站的动态，复杂的本质。

For the next redesign of this blog I wanted to create a 404 page with an animated mosaic of article image thumbnails to communicate the themes of the site. I wanted the animation to appear somewhat random, with each cell in the mosaic flicking to a new image independently of the others.

对于此博客的下一次重新设计，我想创建一个404页面，上面带有文章图像缩略图的动画马赛克，以传达网站的主题。 我希望动画看起来有些随机，马赛克中的每个单元都独立于其他单元弹向新图像。

获取图像 (Gaining The Images)

The first issue is getting all the images. Obviously, you need a large “stock” of thumbnails to choose your random images from: in this example the displayed set will total 54 pictures. You could gain the thumbnails from any source you wished: a folder of images that have been batch-processed with PhotoShop^*; drawing content from a photo service such as flickr or 500px using an API, or using a MySQL query to randomly draw images from a database. I’ve covered most of those techniques in past articles, so how you gain the images won’t be our concern here: in the code below, I’ve assumed a database call.

第一个问题是获取所有图像。 显然，您需要大量的“缩略图”缩略图以从中选择随机图像 ：在此示例中，显示的图像集中共有54张图片。 您可以从任何希望的来源获得缩略图：