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. Go 数组（2）

    把同样类型的一个数组赋值给另外一个数组 package main; import "fmt"; func main() { ] string ; array2:=[]string ...

  2. [BZOJ2341][Shoi2011]双倍回文 manacher+std::set

    题目链接 发现双倍回文串一定是中心是#的回文串. 所以考虑枚举#点.发现以\(i\)为中心的双倍回文的左半部分是个回文串,其中心一定位于\(i-\frac{pal[i]-1}2\)到\(i-1\)之间 ...

  3. Java对象流与序列化学习

    对象流与序列化 对象流有两个类 ObjectOutputStream:将java对象的基本数据类型和图形写入OutputStream ObjectInputStream:对以前使用ObjectOutp ...

  4. vagrant（一）初识与安装

    链接:https://pan.baidu.com/s/1I2RNMNq9G-P4k42-U1Jjtw (这里有需要准备的安装包以及镜像文件,也可自己去官网下载)提取码:jis8 安装VirtualBo ...

  5. archetypeCatalog=internal

    Properties中添加  archetypeCatalog=internal,不加这个参数,在maven生成骨架的时候将会非常慢.

  6. Angular JS - 6 - Angular JS 常用指令

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 配置 Ceph 内外网分离

    https://www.jianshu.com/p/42ab1f6dc6de 1. 为什么要做内外网分离   先明确一下这么做的必要性.Ceph 的客户端,如 RADOSGW,RBD 等,会直接和 O ...

  8. spring-boot整合Mybatis案例（注解方式）

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...

  9. nginx启动、关闭、重启及常用的命令

    nginx常用命令 启动:cd /usr/local/nginx/sbin./nginxnginx服务启动后默认的进程号会放在/usr/local/nginx/logs/nginx.pid文件cat ...

  10. Aspect-Oriented Programming : Aspect-Oriented Programming with the RealProxy Class

    Aspect-Oriented Programming : Aspect-Oriented Programming with the RealProxy Class A well-architecte ...