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实现相册的一种更高级的示例。