html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>图片墙</title>

		<link rel="stylesheet" href="css/style.css" />

	</head>

	<body>

		<div class="container">

		<img class="pic pic1" src="img/pic1.jpg" >

		<img class="pic pic2" src="img/pic2.jpg" >

		<img class="pic pic3" src="img/pic3.jpg" >

		<img class="pic pic4" src="img/pic4.jpg" >

		<img class="pic pic5" src="img/pic5.jpg" >

		<img class="pic pic6" src="img/pic6.jpg" >

		<img class="pic pic7" src="img/pic7.jpg" >

		<img class="pic pic8" src="img/pic8.jpg" >

		<img class="pic pic9" src="img/pic9.jpg" >

		</div>

	</body>

</html>

　　css3

* {

	margin: 0;

	padding: 0;

}

body {

	background-color: #eeeeee;

}

.container {

	width: 960px;

	height: 450px;

	margin: 60px auto;

	position: relative;

}

.pic {

	width: 160px;

}

.container img:hover {

	box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);

	transform: rotate(0deg) scale(1.20);

	-webkit-transform: rotate(0deg) scale(1.20);

	z-index: 2;

}

.container img {

	padding: 10px 10px 15px;

	background: white;

	border: 1px solid #ddd;

	box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);

	-webkit-transition: all 0.5s ease-in;

	-moz-transition: all 0.5s ease-in;

	-ms-transition: all 0.5s ease-in;

	-o-transition: all 0.5s ease-in;

	transition: all 0.5s ease-in;

	position: absolute;

	z-index: 1;

}

.pic1 {

	left: 400px;

	top: 0;

	transform: rotate(-5deg);

	-webkit-transform: rotate(-5deg);

}

.pic2 {

	left: 200px;

	top: 0;

	transform: rotate(-20deg);

	-webkit-transform: rotate(-20deg);

}

.pic3 {

	bottom: 200px;

	right: 100px;

	transform: rotate(5deg);

	-webkit-transform: rotate(5deg);

}

.pic4 {

	bottom: 200px;

	left: 300;

	transform: rotate(-10deg);

	-webkit-transform: rotate(-10deg);

}

.pic5 {

	bottom: 0px;

	top: 0;

	transform: rotate(-10deg);

	-webkit-transform: rotate(-10deg);

}

.pic6 {

	left: 0px;

	top: 0;

	transform: rotate(10deg);

	-webkit-transform: rotate(10deg);

}

.pic7 {

	left: 850px;

	top: 0;

	transform: rotate(20deg);

	-webkit-transform: rotate(20deg);

}

.pic8 {

	left: 0px;

	top: 200px;

	transform: rotate(20deg);

	-webkit-transform: rotate(20deg);

}

.pic9 {

	left: 550px;

	top: 90;

	transform: rotate(15deg);

	-webkit-transform: rotate(15deg);

}

　图片：

效果：

2017-09-15 18:33:34

\ HTML5开发项目实战:照片墙的更多相关文章

  1. C# Xamarin移动开发项目实战篇

    一.课程介绍 在前面阿笨的<C# Xamarin移动开发基础进修篇>课程中,大家已经熟悉和了解了Xamarin移动App开发的基础知识和原理.本次分享课<C# Xamarin移动开发 ...

  2. NET 分布式架构开发项目实战

    .NET 分布式架构开发项目实战 从头到尾,一步一步讲述一个真实的项目实战,关注点主要是架构的思考和实现,以及如何解决平时项目遇到的一些问题. 同时也司公布源代码. 如何构建高性能,稳定SOA应用之- ...

  3. 《ASP.NET Core应用开发入门教程》与《ASP.NET Core 应用开发项目实战》正式出版

    “全书之写印,实系初稿.有时公私琐务猬集,每写一句,三搁其笔:有时兴会淋漓,走笔疾书,絮絮不休:有时意趣萧索,执笔木坐,草草而止.每写一段,自助覆阅,辄摇其首,觉有大不妥者,即贴补重书,故剪刀浆糊乃不 ...

  4. hyperledger 儿童车级开发项目实战----投票系统（1）

    今天根据hyperledger 企业级开发项目实战视频,自己做了一个投票demo.在这做个记录 首先编写智能合约 在$GOPATH的的src路径下创建项目的名称,我的是mkdir vote 然后创建c ...

  5. iOS开发项目实战——Swift实现图片轮播与浏览

    近期開始开发一个新的iOS应用,自己决定使用Swift.进行了几天之后,发现了一个非常严峻的问题.那就是无论是书籍,还是网络资源,关于Swift的实在是太少了,随便一搜全都是OC实现某某某功能.就算是 ...

  6. iOS开发项目实战——Swift实现ScrollView滚动栏功能

    手机作为一个小屏设备,须要显示的信息往往无法在一个屏幕上显示,此时就须要使用到滚动栏,当然除了像TableView这样能够自带滚动功能的. 假设一个界面上View较多,那就必须要使用到ScrollVi ...

  7. iOS开发——项目实战总结&经典错误一

    经典错误一 No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=armv7, VA 运行报错 出现的原因:armv7s ...

  8. IOS开发-项目实战-点赞功能的实现

    实现思路: 1.每一条新闻就是一个cell,在cell上添加点赞按钮. 2.让cell的控制器成为自定义cell的代理,将点击了哪一个cell放在代理方法中传出去. 3.并将这条新闻的ID和当前用户的 ...

  9. iOS开发——项目实战总结&Block使用注意点浅析

    Block使用注意点浅析 1.在使用block前需要对block指针做判空处理. 不判空直接使用,一旦指针为空直接产生崩溃. if (!self.isOnlyNet) { if (succBlock ...

随机推荐

  1. html5 自制播放器

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. CreateJS入门 -- 注释详细到爆炸（My Style）

    写在前面 首先,还是谢谢大家的支持,谢谢!记得在之前的文章中我说过自己算是一个半文艺程序员,也一直想着写一写技术性和其他偏文学性的文章.虽然自己的底子没有多么优秀,但总是觉得这个过程中可以督促自己去思 ...

  3. Redis GeoHash

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11632810.html 背景 微信找附近的人,滴滴找附近的单车,饿了么找附近的餐馆 GeoHash算法 ...

  4. git 配置（实用）

    将公钥添加进入即可  码云是添加私钥(注意!!!!) 这个时候Git就配置好了 git clone ssh协议的仓库 就可以直接拉代码了

  5. HDU 6058 Kanade's sum —— 2017 Multi-University Training 3

    Kanade's sum Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  6. myeclipse svn重新定位 本地文件 svn 重新定位

    我们在用工具myeclipse开发项目时,当资源库存储空间不够时,我们就需要添加资源库,涉及到我们切换项目资源库,下面就介绍一下svn资源库重新定位步骤 1,window到show view到othe ...

  7. 二叉查找树BST

    每棵子树头节点的值都比各自左子树上所有节点值要大,也都比各自右子树上所有节点值要小. 二叉查找树的中序遍历序列一定是从小到大排列的. 一个节点的后继节点是指,这个节点在中序遍历序列中的下一个节点.相应 ...

  8. Android Studio使用tips

    安装位置:C:\Users\xxx\AppData\Local\Android\sdk https://developer.android.com/topic/libraries/support-li ...

  9. react教程 — 性能优化

    参考:https://segmentfault.com/a/1190000007811296?utm_medium=referral&utm_source=tuicool  或  https: ...

  10. （转）k8s存储之NFS

    转:https://www.cnblogs.com/DaweiJ/articles/9131762.html 1 NFS介绍 NFS是Network File System的简写,即网络文件系统,NF ...