<!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. Linux系统7个运行级别(runlevel)(转)

    原文地址:http://www.cnblogs.com/dkblog/archive/2011/08/30/2160191.html Linux系统有7个运行级别(runlevel) 运行级别0:系统 ...

  2. SQL Server ---T-SQl基本语句

    T-SQL 是 SQL-Server 的结构化查询语言. 基本数据操作语言. 基础语句 先创建表 我后面的列子都是用的这一个表,列名啥的 就大概看看吧~~ 纯粹为了学习语句,语法~~所以先创建个表吧~ ...

  3. 【原创】09. easyui-tabs 配合 iframe 使用，请求两次等问题

    描述 需要把已经做好的几个设备管理页面.转为子菜单管理:直接使用 easyui-tabs 配合 iframe 是最省时省力的. 存在问题 当点击 "设备管理" 会出现子页面多次加载 ...

  4. 模板 mú bǎn

    链式前向星 #include<string.h> #define MAX 10000 struct node { int to,nex,wei; }edge[MAX*+]; ],cnt; ...

  5. Mysql自动填充测试数据

    前言 最近写了两个小脚本,一个应用于Mysql的自动填充测试数据,另外一个是bash写的定期删除日志文件,两个脚本如何使用,在GitHub上面都有所说明,这里不再赘述,这里主要是想聊一下Mysql的存 ...

  6. Java集合框架Collections【List/Set】

    1.基本介绍: 集合就是存放对象的,他比数组好的一点就是他一开始不清楚自己长度 容器一般是分为很多种的,很多的容器在一起然后进过断的抽象和抽取就成了一个体系,我们称之为集合框架 我们看体系首先是看顶层 ...

  7. 自己动手封装一个url参数解释器( ghostWuUrlParser.js )

    ghostWuUrlParser.js的作用是分析一段url中的查询参数,即: '?'号后面的 键值对参数. ghostWuUrlParser.js 使用说明: ghostWuUrlParser( ' ...

  8. java中Comparable和Comparator两种比较器的区别

    Comparable和Comparator接口都是为了对类进行比较,众所周知,诸如Integer,double等基本数据类型,java可以对他们进行比较,而对于类的比较,需要人工定义比较用到的字段比较 ...

  9. ps命令用法

    转自:http://www.cnblogs.com/peida/archive/2012/12/19/2824418.html Linux中的ps命令是Process Status的缩写.ps命令用来 ...

  10. Linux操作系统-安装JAVA

    首先准备好jdk文件(例如:本地已下载了jdk-6u33-linux-x64.bin),将它上传到路径 “/home/username/” 这个目录的下面 其次按步骤执行: 1.进入到 “/home/ ...