<!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. IT软件管理人员的职业路线（从技术经理到总经理） - CEO之公司管理经验谈

    技术.业务和管理永远是工作的一个话题.笔者今天就根据自身的经验,通过这三个方面介绍下IT软件管理人员的职业路线.前面写过一个文(IT软件技术人员的职位路线(从程序员到技术总监) - 部门管理经验谈), ...

  2. 第一个asp.net实例——生日邀请以及回函

    22回校后,看了论文游了西湖,今天开始接触asp.net,从图书馆选了两本书:<精通ASP.NET 4.5 (第五版)>,<ASP.NET全能速查手册>.一本练手细看,一本翻查 ...

  3. 使用HTML5 FormData对象实现大文件分块上传(断点上传)功能

    FormData是HTML5新增的一个对象,通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单 ...

  4. NET中解决KafKa多线程发送多主题的问题

    一般在KafKa消费程序中消费可以设置多个主题,那在同一程序中需要向KafKa发送不同主题的消息,如异常需要发到异常主题,正常的发送到正常的主题,这时候就需要实例化多个主题,然后逐个发送. 在NET中 ...

  5. Apache安装编译遇到APR的问题

    http://mirrors.tuna.tsinghua.edu.cn/apache//httpd/httpd-2.4.27.tar.bz2Apache下载链接 在解压Apache源码包进入目录运行 ...

  6. ida和idr机制分析（盘符分配机制）

    # ida和idr机制分析 ida和idr的机制在我个人看来,是内核管理整数资源的一种方法.在内核中,许多地方都用到了该结构(例如class的id,disk的id),更直观的说,硬盘的sda到sdz的 ...

  7. Python 实现排序算法

    排序算法 下面算法均是使用Python实现: 插入排序 原理:循环一次就移动一次元素到数组中正确的位置,通常使用在长度较小的数组的情况以及作为其它复杂排序算法的一部分,比如mergesort或quic ...

  8. 封装sqlhelper类

    using System;using System.Collections.Generic;using System.Data;using System.Data.Common;using Syste ...

  9. maven系列小技巧之Top3 MVQ(most valuable question)

    首先声明,文章系个人原创 ,欢迎转载,转载请注明出处. 对于maven,有大神曾说过:如果你爱他,就请让他用Maven,因为那里是天堂,如果你恨他,就请让他用Maven,因为那里是地狱.尤其是mave ...

  10. Android -- 从源码的角度一步步打造自己的TextView

    1,自定义控件一直是我们的痛点,今天就和大家一点点去了解了解,首先一般的自定义控件都是继承于View类,所以我们先来看看view的一些重要的方法,这是官方文档,大家想了解更多也可以去看看,这里我展示对 ...