淘先锋技术网

首页 1 2 3 4 5 6 7

惊喜相册是一款非常实用的网页相册,它可以帮助你在网页上展示图片。而其中一个重要的组成部分是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文件夹中,样式文件是相册制作中最关键的一部分。样式文件中的内容可以定义相册的大小,图片的样式和动画效果等等。通过修改样式文件,可以让相册变得更加漂亮和引人入胜。