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 表单提交实例

    html <!DOCTYPE html> <html> <head> <title>表单</title> <meta charset= ...

  2. html5 实例渐变

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

  3. 如何开启spring框架以注解形式的配置

    步骤 导包(新版本需要导入spring-aop-4.3.17.RELEASE.jar) 为配置文件applicationContext.xml引入新的命名空间(约束) 开启使用注解 <?xml ...

  4. Jenkins之配置GitHub-Webhook2

    什么是持续集成(Continuous integration) 提出者Martin Fowler本人对持续集成是这样定义的:持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每 ...

  5. 使用UncaughtExceptionHandler重启线程

    先复习Java中的异常 java.lang.Throwable 顶层父类 |– Error错误:JVM内部的严重问题,如OOM,程序员无法在代码中无法处理. |–Exception异常:普通的问题.通 ...

  6. DELPHI 10 SEATTLE 在OSX上安装PASERVER

    旧版本的DELPHI在安装目录下里的PASERVER目录有安装文件,但奇怪在这个SEATTLE上的PASERVER目录下只有一个EXE程序的安装程序​​,显然不能安装到OSX里,需要在Embarcad ...

  7. php explode()函数 语法

    php explode()函数 语法 作用:把字符串打散为数组 语法:explode(separator,string,limit)大理石机械构件 参数: 参数 描述 separator 必需.规定在 ...

  8. PHP curl_multi_getcontent函数

    curl_multi_getcontent — 如果设置了CURLOPT_RETURNTRANSFER,则返回获取的输出的文本流 说明 string curl_multi_getcontent ( r ...

  9. Security基础(四)：OpenSSL及证书服务常用系统监控命令、搭建nagios监控服务器、配置文件及插件使用、监控远程主机的公有数据、监控远程主机的私有数据

    一.OpenSSL及证书服务常用系统监控命令 目标: 本案例要求练习常用的系统监控命令完成以下任务: 使用vmstat命令监控内存及磁盘I/O信息 使用iostat命令监控CPU处理器及磁盘的I/O信 ...

  10. Workflow：Workflow 目录

    ylbtech-Workflow:Workflow 目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:ht ...