炫酷相册html代码
时间: 2024-07-01 20:01:16 浏览: 168
创建一个炫酷的HTML相册通常涉及到使用CSS和JavaScript来添加一些交互性和视觉效果。以下是一个简单的HTML结构和基本的CSS/JavaScript示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>炫酷相册</title>
<style>
.photo-gallery {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
overflow: hidden;
}
.photo {
width: 300px;
height: 200px;
margin: 10px;
border: 1px solid #ccc;
cursor: pointer;
transition: transform 0.3s ease;
}
.photo:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="photo-gallery">
<img src="image1.jpg" class="photo" alt="Image 1">
<img src="image2.jpg" class="photo" alt="Image 2">
<!-- 更多图片... -->
</div>
<script>
// JavaScript (如轮播或图片切换) 可在此添加
</script>
</body>
</html>
```
这个代码片段创建了一个包含图片的容器,图片会有一些基础的悬停效果(缩放)。为了实现更复杂的交互,比如轮播或图片切换,你可以添加一些JavaScript库(如Swiper、Flickity等),或者编写自定义的JavaScript代码。
阅读全文