HTML相册效果实现

HTML 专栏收录该内容
13 篇文章 0 订阅

最终实现的效果如下,可进入展示页面查看
展示页面:http://xyy9.gitee.io/roll/album.html
相册

HTML

都是一样的 div 自行复制即可

<!--相册-->
<div id="albums">
<a href="day_1.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/day1.jpg" >
		</div>
	</div>
</a>
<a href="day_2.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/day2.jpg" >
		</div>
	</div>
</a>
<a href="day_3.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/day3.jpg" >
		</div>
	</div>
</a>
<a href="day_1.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/1571642606356.jpeg" >
		</div>
	</div>
</a>
<a href="day_1.html">
	<div class="smallpicshow">
		<div class="smallpicshow_zoom">
			<img class="smallpic" src="img/1571642606356.jpeg" >
		</div>
	</div>
</a>

album.css

#context{
	margin: 0 auto;
	margin-top: 448px;
	width: auto;
	height: auto;
	background-color: #FFFFFF;
}

#albums{
	margin: 0 auto;
	padding: 70px 50px 50px 140px;
	text-align: center;
	width: auto;
	height: auto;
	
}

#bgimage_album{
	margin:0px;
	padding:0px;
	position: fixed;
	right:0px;
	bottom:200px;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -11;
}

.smallpicshow{
	width: 200px;
	height: 200px;
	float: left;
	text-align: center;
	vertical-align: middle;
	margin: 60px;
}
.smallpicshow_zoom{
	width: 200px;
	height: 200px;
	box-shadow: 10px 10px 10px 10px #E5DFD3;
	float: left;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	transition: all 0.3s;
}
.smallpicshow:hover .smallpicshow_zoom{
	width: 250px;
	height: 250px;
	transform: rotate(3deg);
	box-shadow: 0px 0px 35px 35px #D6CCB7;
}
.smallpic{
	width: 100%;
	height: 100%;
}

网站源码:码云仓库
图片:https://gitee.com/xyy9/roll/blob/master/img/1571642606356.jpeg

  • 5
    点赞
  • 0
    评论
  • 34
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值