CSS3制作照片墙

最新推荐文章于 2022-11-01 20:30:34 发布

三爷麋了鹿

最新推荐文章于 2022-11-01 20:30:34 发布

阅读量828

点赞数 1

分类专栏： html5学习

本文链接：https://blog.csdn.net/u800820/article/details/41958823

版权

html5学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1.用CSS制作照片墙需要用到两个重要属性：transform和transition。

transform属性允许旋转(rotate)、伸缩(scale)、倾斜(skew)或者移动(translate)元素。

transition(“过渡”)使属性值在指定时间内平滑地完成变化。可以配置4个属性：transition-property，指定过渡效果所应用的属性；transition-duration，指定完成变化的时间；transition-timing-function，描述属性值的变化速度，常用值包括ease(默认，逐渐变慢)，linear(匀速变化)，ease-in(加速变化)，ease-out(减速变化)，ease-in-out(加速然后减速)。

2.还要用到一个重要属性是z-index，该属性配置元素堆叠顺序，属性值为数字，数值越大显示得越在上。

用一个div作为父容器来包含所有图片，将position设为relative；注意要为每张图片分配一个class(必须用class才能实现图片伸缩)，为每张图片配置position为absolute。还需要注意不同浏览器的内核支持问题。

3.代码示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>照片墙</title>
		<style>
			body{
				background: #eee;}
			.container{
				width:960px;
				height:450px;
				margin: 60px auto;
				position:relative;}
			img{
				width:240px;
				height:180px;
				padding: 10px 10px 15px 10px;
				border: 1px solid #ddd;
				position:absolute;
				transition:1s;
				-moz-transition:1s;
				-webkit-transition:1s;
				z-index:1;}
			img:hover{
				transform:rotate(0deg);
				-moz-transform:rotate(0deg);
				-webkit-transform:rotate(0deg);
				transform:scale(1.5);
				-moz-transform:scale(1.5);
				-webkit-transform:scale(1.5);
				box-shadow:4px 4px 10px #ccc;
				-moz-box-shadow:4px 4px 10px #ccc;
				-webkit-box-shadow:4px 4px 10px #ccc;
				z-index:2;}
			.img1{
				top:50px;
				left:20px;
				transform:rotate(-10deg);
				-moz-transform:rotate(-10deg);
				-webkit-transform:rotate(-10deg);}
			.img2{
				top:50px;
				left:100px;
				transform:rotate(10deg);
				-moz-transform:rotate(10deg);
				-webkit-transform:rotate(10deg);}
			.img3{
				top:50px;
				left:200px;
				transform:rotate(30deg);
				-moz-transform:rotate(30deg);
				-webkit-transform:rotate(30deg);}
		</style>
	</head>
	
	<body>
	  <div class="container">
	  	<img class="img1" src="m1.jpg"/>
	  	<img class="img2" src="m1.jpg"/>
	  	<img class="img3" src="m1.jpg"/>
	  </div>
	</body>
	
</html>

三爷麋了鹿

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3制作照片墙

1.用CSS制作照片墙需要用到两个重要属性：transform和transition。transform属性允许旋转(rotate)、伸缩(scale)、倾斜(skew)或者移动(translate)元素。transition(“过渡”)使属性值在指定时间内平滑地完成变化。可以配置4个属性：transition-property，指定过渡效果所应用的属性；transition-du
复制链接

扫一扫