html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>图片墙</title>
  6. 		<link rel="stylesheet" href="css/style.css" />
  7. 	</head>
  8. 	<body>
  9. 		<div class="container">
  10. 		<img class="pic pic1" src="img/pic1.jpg" >
  11. 		<img class="pic pic2" src="img/pic2.jpg" >
  12. 		<img class="pic pic3" src="img/pic3.jpg" >
  13. 		<img class="pic pic4" src="img/pic4.jpg" >
  14. 		<img class="pic pic5" src="img/pic5.jpg" >
  15. 		<img class="pic pic6" src="img/pic6.jpg" >
  16. 		<img class="pic pic7" src="img/pic7.jpg" >
  17. 		<img class="pic pic8" src="img/pic8.jpg" >
  18. 		<img class="pic pic9" src="img/pic9.jpg" >
  19. 		</div>
  20. 	</body>
  21. </html>

　　css3

  1. * {
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5.  
  6. body {
  7. 	background-color: #eeeeee;
  8. }
  9.  
  10. .container {
  11. 	width: 960px;
  12. 	height: 450px;
  13. 	margin: 60px auto;
  14. 	position: relative;
  15. }
  16.  
  17. .pic {
  18. 	width: 160px;
  19. }
  20.  
  21. .container img:hover {
  22. 	box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);
  23. 	transform: rotate(0deg) scale(1.20);
  24. 	-webkit-transform: rotate(0deg) scale(1.20);
  25. 	z-index: 2;
  26. }
  27. .container img {
  28. 	padding: 10px 10px 15px;
  29. 	background: white;
  30. 	border: 1px solid #ddd;
  31. 	box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);
  32. 	-webkit-transition: all 0.5s ease-in;
  33. 	-moz-transition: all 0.5s ease-in;
  34. 	-ms-transition: all 0.5s ease-in;
  35. 	-o-transition: all 0.5s ease-in;
  36. 	transition: all 0.5s ease-in;
  37. 	position: absolute;
  38. 	z-index: 1;
  39. }
  40. .pic1 {
  41. 	left: 400px;
  42. 	top: 0;
  43. 	transform: rotate(-5deg);
  44. 	-webkit-transform: rotate(-5deg);
  45. }
  46.  
  47. .pic2 {
  48. 	left: 200px;
  49. 	top: 0;
  50. 	transform: rotate(-20deg);
  51. 	-webkit-transform: rotate(-20deg);
  52. }
  53.  
  54. .pic3 {
  55. 	bottom: 200px;
  56. 	right: 100px;
  57. 	transform: rotate(5deg);
  58. 	-webkit-transform: rotate(5deg);
  59. }
  60.  
  61. .pic4 {
  62. 	bottom: 200px;
  63. 	left: 300;
  64. 	transform: rotate(-10deg);
  65. 	-webkit-transform: rotate(-10deg);
  66. }
  67.  
  68. .pic5 {
  69. 	bottom: 0px;
  70. 	top: 0;
  71. 	transform: rotate(-10deg);
  72. 	-webkit-transform: rotate(-10deg);
  73. }
  74.  
  75. .pic6 {
  76. 	left: 0px;
  77. 	top: 0;
  78. 	transform: rotate(10deg);
  79. 	-webkit-transform: rotate(10deg);
  80. }
  81.  
  82. .pic7 {
  83. 	left: 850px;
  84. 	top: 0;
  85. 	transform: rotate(20deg);
  86. 	-webkit-transform: rotate(20deg);
  87. }
  88.  
  89. .pic8 {
  90.  
  91. 	left: 0px;
  92. 	top: 200px;
  93. 	transform: rotate(20deg);
  94. 	-webkit-transform: rotate(20deg);
  95. }
  96.  
  97. .pic9 {
  98. 	left: 550px;
  99. 	top: 90;
  100. 	transform: rotate(15deg);
  101. 	-webkit-transform: rotate(15deg);
  102. }

　图片：

效果：

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. C/C++ cJSON 使用实例

    本文为转载 原文地址:http://blog.sina.com.cn/s/blog_4c0cb1c00102xg7j.html 使用说明:将cJSON.c.cJSON.h两个文件,拷贝到工程项目文件中 ...

  2. ForkJoinPool线程池--分支执行

    import java.util.ArrayList; import java.util.concurrent.ExecutionException; import java.util.concurr ...

  3. 【leetcode】1020. Partition Array Into Three Parts With Equal Sum

    题目如下: Given an array A of integers, return true if and only if we can partition the array into three ...

  4. python3 内置函数enumerate

    一.简介: 该函数在字面上是枚举.列举的意思,用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列, 同时列出数据和数据下标,一般用在 for 循环当中,可同时得到数据对象的值及对应的 ...

  5. 谷歌已经对Android的开源严防死守

    上周,沸沸扬扬的Android垄断案把Google又一次推向了风口浪尖,在这次的垄断案中,Google被欧盟起诉赔偿50亿美元,被起诉的其中一个原因是Google对外宣称Android是开放的,但其实 ...

  6. POJ 3348 Cows (凸包模板+凸包面积)

    Description Your friend to the south is interested in building fences and turning plowshares into sw ...

  7. 【Linux】grub引导修复

    将系统盘挂载上并设置开机从光盘启动(U盘也可以) 进入系统安装引导初始界面,然后选择最后一项Troubleshooting 然后选择第二项Rescue a CentOS system进入系统救援模式选 ...

  8. 【HDOJ6610】Game（序列带修莫队）

    题意:有n堆石子,第n堆有a[i]个,A先选择一个范围[L,R],B选择一个子区间[l,r],之后照nim游戏的规则进行 现在有询问与操作 每次询问B在给定的[L,R]内有多少种子区间的取法使得A必胜 ...

  9. C#后台获取post参数

    public static string GetQueryString(string key) { if (HttpContext.Current.Request[key] == null) retu ...

  10. web前端典型示例

    1.轨迹回放:https://openlayers.org/en/v4.6.5/examples/feature-move-animation.html https://blog.csdn.net/s ...