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. 12.整合neo4j

    neo4j 官网下载: https://neo4j.com/download-center/#community 教程: http://neo4j.com.cn/public/cypher/defau ...

  2. ruby语法之方法

    ruby中的方法相当于python的函数 其定义规则为: 方法名应以小写字母开头.如果您以大写字母作为方法名的开头,Ruby 可能会把它当作常量,从而导致不正确地解析调用. 方法应在调用之前定义,否则 ...

  3. 因为信仰，油画专业的他自学开发进击阿里技术P9

    大约在1年以前,阿里云视频云团队来了一位热心和气.爱好广泛的老干部新同学,他就是资深技术专家郝冲,花名和招,寓意“和气招财”. 有人说程序员只喜欢安静地写代码,和招偏偏一个户外运动爱好者.他擅长滑雪, ...

  4. spring boot jar的支持

  5. sublime常用基础插件合集

    插件介绍 Package Control 功能:安装包管理简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能使用方法:快捷键 Ctrl+Shift+P,输入 install 选中In ...

  6. Android实战技巧：Dialog （转）

    转:http://blog.csdn.net/hitlion2008/article/details/7567549#t0 Dialog是任何系统都必须有的一个控件,作为辅助窗口,用于显示一些消息,或 ...

  7. 服务器上的 IPProxy代理设置

    1.window 平台 CCProxy 安装包 传送门: http://www.xue51.com/soft/2794.html 该页面详细的说明了ccproxy怎么安装.怎么破jie.... 下面老 ...

  8. C#关于日期 月 天数 和一年有多少周及根据某年某周获取时间段的计算(转)

    /// 当前月有多少天 /// </summary> /// <param name="y"></param> /// <param na ...

  9. 详解Linux运维工具：运维流程管理、运维发布变更、运维监控告警

     概述 应用上线后,运维工作才刚开始,具体工作可能包括:升级版本上线工作.服务监控.应用状态统计.日常服务状态巡检.突发故障处理.服务日常变更调整.集群管理.服务性能评估优化.数据库管理优化.随着应用 ...

  10. 继承Process类,run函数的简单使用

    #定义一个类 继承Process类 from multiprocessing import Process import os import time class Download(Process): ...