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. 三栏布局只知道圣杯、双飞翼，最终评级是……F

    三栏布局,面试与工作中的常见布局.分左中右三部分,其中左右宽度已知,中间宽度自适应.根据不同的DOM顺序与CSS处理,这里写下了五类布局方式. 一.浮动布局 1 圣杯布局 L:"我问你,你就 ...

  2. SpringBoot+Shiro学习（七）：Filter过滤器管理

    SpringBoot+Shiro学习(七):Filter过滤器管理 Hiwayz 关注  0.5 2018.09.06 19:09* 字数 1070 阅读 5922评论 1喜欢 20 先从我们写的一个 ...

  3. vagrant up ----失败 问题解决

    命令行启动提示信息 there was an error while executing `vboxmanage`, a cli used by vagrant for controlling vir ...

  4. 【锁】MySQL和Oracle行锁比较

    InnoDB INNODB表是索引组织的表,主键是聚集索引,非主键索引都包含主键信息. INNODB默认是行锁. INNODB行锁是通过给索引项加锁来实现的,即只有通过索引条件检索数据,InnoDB才 ...

  5. Oracle序列重置

    Oracle 中的序列我们一般用来生成流水号,所以需要进行重置(如每天凌晨重置一次),我们虽然可以通过重新编译的方式重置序列,可是这种方法会有弊端,比如导致与该序列相关的存储过程或函数失效等等,需要重 ...

  6. 十条服务器端优化Web性能的技巧

    服务器  远程桌面连接工具 提高web应用的性能从来没有比现在更重要过.网络经济的比重一直在增长;全球经济超过5%的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其 ...

  7. [CSP-S模拟测试]:Lighthouse（哈密顿回路+容斥）

    题目背景 $Billions\ of\ lighthouses...stuck\ at\ the\ far\ end\ of\ the\ sky.$ 题目描述 平面有$n$个灯塔,初始时两两之间可以相 ...

  8. php面试专题---2、常量及数据类型考点

    php面试专题---2.常量及数据类型考点 一.总结 一句话总结: 变量为null和变量判断为false的情况需要仔细注意下 1.PHP中字符串可以使用哪三种定义方法以及各自的区别是什么? 单引号:不 ...

  9. net core配置log4net需要注意的地方

    和netframework不一样的是,netcore 没有assembly文件.所以配置的时候需要注意: 1.配置文件可以没有 <configSections> <section n ...

  10. （三）修改内核大小，适配目标板Nand flash分区配置

    一. 修改内核大小 1. 在你的配置文件下uboot/include/config/xxx.h 里面有一个宏定义 #define MTDPARTS_DEFAULT "mtdparts=jz2 ...