[分享]css做一个画廊

CSS作为一种网页设计语言，可以给网页增色不少。今天我们来介绍如何用CSS做一个简单的画廊。

/* 用CSS构造一个画廊 */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery img {
  width: 33%;
  margin: 10px;
  box-shadow: 2px 2px 2px #ccc;
}

.gallery img:hover {
  transform: scale(1.1);
  transition: transform 0.5s;
} 

首先，我们需要一个元素来包裹我们的图片。我们将这个命名为.gallery。

我们使用flex布局来让图片自动排列，将display属性设置为flex。为了使图片的大小一致并且每个图片之间有一定的间隔，我们给所有的图片加上一个margin属性和一个宽度属性。这里我们将宽度设置为33%。我们还为图片添加了一个阴影，使其看起来更有立体感。

为了让画廊有些动态效果，我们在鼠标移动到图片上时对其进行缩放。我们使用:hover伪类来实现。当用户将鼠标悬停在图片上时，我们将其scale属性设置为1.1，这将使图片放大10%。我们还为这个效果添加了过渡，使其更加流畅。

这就是一个简单的CSS画廊。你可以根据自己的需求来调整图片的大小和排列方式，添加更多的动态效果，让它更加炫酷。