惊喜相册是一款非常实用的网页相册,它可以帮助你在网页上展示图片。而其中一个重要的组成部分是CSS文件夹。CSS文件夹为相册提供了美丽的样式和动画效果。
//样式文件 /*相册主体样式*/ .album { margin: 0 auto; width: 90vw; max-width: 600px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; text-align: center; } /*相册图片的样式*/ .album img { width: 100%; height: auto; object-fit: cover; cursor: pointer; transition: transform 0.5s; } /*图片放大效果*/ .album img:hover { transform: scale(1.1); } /*放大框样式*/ .enlarge { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s; } /*放大框里面的图片样式*/ .enlarge img { max-width: 600px; max-height: 600px; cursor: pointer; } /*放大框动画效果*/ .enlarge.visible { visibility: visible; opacity: 1; }
在CSS文件夹中,样式文件是相册制作中最关键的一部分。样式文件中的内容可以定义相册的大小,图片的样式和动画效果等等。通过修改样式文件,可以让相册变得更加漂亮和引人入胜。