当先锋百科网

首页 1 2 3 4 5 6 7

CSS3可以帮助我们制作出华丽的相册效果。以下是一个简单的CSS3相册示例:

/* 相册图片样式 */
.album img {
border: 5px solid #fff;
height: 200px;
margin: 10px;
opacity: 0.8;
transition: opacity 0.5s ease-in-out;
width: 300px;
}
.album img:hover {
opacity: 1;
}
/* 相册布局 */
.album {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

使用以上代码,我们可以做到以下几点:

  • 图片有一个轻微的透明效果,鼠标悬浮时提高透明度
  • 图片有一个白色边框
  • 相册自动适应浏览器宽度,图片自动排列

如果需要添加更多效果,可以通过CSS3的各种特性来完成。例如,可以使用动画效果,在点击一张图片时放大它并显示一个浮动窗口,包含更多照片信息。这是使用CSS3实现相册的一种更高级的示例。