响应式布局的相册效果

超、凢脫俗 2022-02-17 09:25 258阅读 0赞

响应式布局的相册效果，效果如下图所示，或者看看 [demo][]，记得调整浏览器宽度哟，或者直接 [下载][Link 1]。

# 开始制作吧，先来html #

# 整体设置 #

*{
    	padding: 0;
    	margin:0;
    }
    .pic{
    	width:98%;
    	margin: 0 auto;
    }
    .pic:after{
    	clear:both;
    }

# 列表项实现 #

calc()设置列表项宽度，实现宽度等分。

.pic li{
    	list-style: none;
    	overflow: hidden;
    	float: left;
    	width: 16.6666667%; /* Fallback */
    	width: -webkit-calc(100% / 6);
    	width: calc(100% / 6);
    	position: relative;
    	z-index: 2;
    }

:after伪对象选择器实现激活时的提示文本和背景。

.pic li:after{
    	content: attr(title);
    	display: table-cell;
    	width: 90%;
    	height: 94%;
    	text-align: center;
    	color: #fff;
    	font-size:30px;
    	background-color: rgba(71, 163, 218, 0.2);
    	opacity:0;
    	box-shadow: 1px 1px 2px rgba(255,255,255,.3);
    	position: absolute;
    	left: 5%;
    	top: 3%;
    	cursor: pointer;
    	z-index: 30;
    
    	-webkit-transform: scale(.2);
    	-moz-transform: scale(.2);
    	-ms-transform: scale(.2);
    	-o-transform: scale(.2);
    	transform: scale(.2);
    
    	-webkit-transition: all .5s ease;
    	-moz-transition: all .5s ease;
    	-ms-transition: all .5s ease;
    	-o-transition: all .5s ease;
    	transition: all .5s ease;
    }
    .pic li:hover:after{
    	opacity: 1;
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    	-ms-transform: scale(1);
    	-o-transform: scale(1);
    	transform: scale(1);
    }

图像的设置。

.pic li a,
    .pic li a img {
    	display: block;
    	width: 100%;
    	cursor: pointer;
    }
    .pic li img{
    	position: relative;
    	z-index: 4;
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    	-ms-transform: scale(1);
    	-o-transform: scale(1);
    	transform: scale(1);
    
    	-webkit-transition: all .5s ease;
    	-moz-transition: all .5s ease;
    	-ms-transition: all .5s ease;
    	-o-transition: all .5s ease;
    	transition: all .5s ease;
    }
    .pic li:hover img{
    	-webkit-transform: scale(1.5);
    	-moz-transform: scale(1.5);
    	-ms-transform: scale(1.5);
    	-o-transform: scale(1.5);
    	transform: scale(1.5);
    }

# 响应式布局 #

通过CSS3 Media Query实现响应式Web设计

@media screen and (max-width: 1190px){
    	.pic li{
    		width: 20%; /* Fallback */
    		width: -webkit-calc(100% / 5);
    		width: calc(100% / 5);
    	}
    }
    @media screen and (max-width: 945px){
    	.pic li{
    		width: 25%; /* Fallback */
    		width: -webkit-calc(100% / 4);
    		width: calc(100% / 4);
    	}
    }
    @media screen and (max-width: 660px){
    	.pic li{
    		width: 33.333%; /* Fallback */
    		width: -webkit-calc(100% / 3);
    		width: calc(100% / 3);
    	}
    }
    @media screen and (max-width: 400px){
    	.pic li{
    		width: 50%; /* Fallback */
    		width: -webkit-calc(100% / 2);
    		width: calc(100% / 2);
    	}
    }
    @media screen and (max-width: 300px){
    	.pic li{
    		width: 100%;
    	}
    }

完工！主要学习响应式布局的实现和calc的应用。

\-----------------------------------------------------------------------------

前端开发whqet，关注网页前端开发，分享网页相关资源。

\-----------------------------------------------------------------------------

[demo]: http://gx.zptc.cn/whqet/responsivegallery/responsive.html
[Link 1]: http://pan.baidu.com/share/link?shareid=424682&uk=2114287147