<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS照片墙</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
@charset "utf-8";
body {
background:gainsboro;
}
.div_pic {
width:900px;
height:450px;
margin:60px auto;
}
.p {
/*内边距*/
padding:10px 10px 10px;
background:white;
/*背景*/
/*左移，下移，虚化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);
width:150px;
/*相对定位*/
position:relative;
}
/*每张图片倾斜角度*/
.p1 {
transform:rotate(-5deg);
}
.p2 {
transform:rotate(9deg);
}
.p3 {
transform:rotate(14deg);
}
.p1 {
transform:rotate(2deg);
}
.p4 {
transform:rotate(-3deg);
}
.p5 {
transform:rotate(8deg);
}
.p6 {
transform:rotate(2deg);
}
.p7 {
transform:rotate(-1deg);
}
.p8 {
transform:rotate(1deg);
}
.p9 {
transform:rotate(-5deg);
}
.div_pic img:hover {
/*旋转角度变回0*/
transform:rotate(0deg) scale(1.5);
z-index:9;
}
</style>
</head>
<body>
<div class="div_pic">
<img class="p p1" src="http://www.jq22.com/img/cs/500x500-1.png">
<img class="p p2" src="http://www.jq22.com/img/cs/500x500-2.png">
<img class="p p3" src="http://www.jq22.com/img/cs/500x500-3.png">
<img class="p p4" src="http://www.jq22.com/img/cs/500x500-4.png">
<img class="p p5" src="http://www.jq22.com/img/cs/500x500-5.png">
<img class="p p6" src="http://www.jq22.com/img/cs/500x500-6.png">
<img class="p p6" src="http://www.jq22.com/img/cs/500x500-7.png">
<img class="p p8" src="http://www.jq22.com/img/cs/500x500-8.png">
<img class="p p9" src="http://www.jq22.com/img/cs/500x500-9.png">
</div><script>
</script>
</body>
</html>

CSS照片墙的更多相关文章

  1. html+css照片墙

    html文件 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF- ...

  2. 纯CSS照片墙

    css中transform参考CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate 效果图:

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. 纯css实现照片墙3D效果

    每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...

  5. CSS制作照片墙

    资料来源:慕课网(点击这里) 课程结束后有两个效果: 效果一:CSS制作照片墙(点击这里) 效果二:旋转出现文字效果(点击这里) 实现代码: <!DOCTYPE html> <htm ...

  6. 纯CSS实现3D照片墙

    HTML部分: <body> <div class="photo-wrap"> <!-- 舞台 --> <div class=" ...

  7. javascript照片墙效果

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  9. 原生JS编写的照片墙效果实例演示特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. （转）Sublime Text中文乱码问题

    Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦.不过Sublime Package Control所以供的插件可以让Subli ...

  2. hive配置过程中出现的一个问题

    执行hive里面的insert语句的时候,报错,执行失败查看hadoop的日志文件之后发现错误的详细信息如下: 把hdfs-site.xml中的hadoop.tmp.dir这个属性添加到core-si ...

  3. 抓取60000+QQ空间说说做一次数据分析

    对于QQ空间的数据一直来是垂涎不已,老早就想偷过来研究研究,这几天闲下来便开始动手... 整个程序的流程为:登录-->获取cookie-->获取所有的好友qq_number-->根据 ...

  4. iOS与web交互的那些事

    一转眼又是大半年过去了,除了上架了一款新应用外,也没什么进步.所以最近琢磨着搞点事情,不然我那本Java教程都快看完了. 做为一名iOS高(la)阶(ji)法师,几乎所有的任务里,都会出现web这个从 ...

  5. git版本控制 for window安装和命令行使用

    Git 安装配置 Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 msysGit 的项目提供了安装包,可以到 GitHub 的页面上下载 exe 安装文件并运行 ...

  6. Unity 使用xLua遇到的坑

    在我们使用xLua作为Unity中lua集成的解决方案时,遇到了一个问题,就是当我们使用在lua中把UI中的某个控件绑定相应的事件(如按钮的onClick事件),xLua绑定这个事件是用委托实现的,具 ...

  7. 【NO.12-1】Jmeter - 在Linux执行性能测试的方法 [1]

    前面讲过在Windows执行性能测试的方法,就是这篇了<jmeter - 一个完整的接口测试的脚本>, 在Windows执行性能测试之前,首先要有1个性能测试脚本嘛, 但是这个性能测试脚本 ...

  8. webgl自学笔记——矩阵变换

    这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...

  9. uploadify 在chrome上崩溃的解决办法

    使用Uploadify进行文件上传,Chrome经常会报“喔唷,崩溃啦”的错误,见下图: 很显然,这是Chrome浏览器缓存功能,所导致的问题.从LOG里也能看到:正常的情况下,会请求文件(jquer ...

  10. Python 函数装饰器和闭包

    装饰器基础知识 装饰器是可调用的对象,其参数是另一个函数(被装饰的函数). 装饰器可能会处理被装饰的函数,然后把它返回,或者将其替换成另一个函数或可调用对象. p.p1 { margin: 0.0px ...