html文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cssz照片墙</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>照片墙</h1>
<div class ="container">
<img class = "pic1 pic" src="img/1.jpg" alt=""/>
<img class = "pic2 pic" src="img/2.jpg" alt=""/>
<img class = "pic3 pic" src="img/3.jpg" alt=""/>
<img class = "pic4 pic" src="img/4.jpg" alt=""/>
<img class = "pic5 pic" src="img/5.jpg" alt=""/>
<img class = "pic6 pic" src="img/6.jpg" alt=""/>
<img class = "pic7 pic" src="img/7.jpg" alt=""/>
<img class = "pic8 pic" src="img/8.jpg" alt=""/>
<img class = "pic9 pic" src="img/9.jpg" alt=""/>
</div>
</body>
</html>

css文件：

h1{text-align:center;}
body{background: #eee;}
.container{
width:960px;
height: 450px;

margin:60px auto;

position: relative;

}
img{
padding:10px 10px 15px 10px;
border: 1px solid #ccc;
background: #fff;
position: absolute;

width:150px;

-webkit-transition:1s;
-moz-transition:1s;
transition: 1s;

}
img:hover{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform: rotate(0deg);

-webkit-transform:scale(1.2);
-moz-transform:(1.2);
transform:scale(1.2);
z-index:2;
box-shadow: 10px 10px 15px #ccc;

}

.pic1{
top:2px;
left:10px;
z-index:1;
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
transform: rotate(-10deg);
}
.pic2{
top:25px;
left:170px;
z-index:1;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform: rotate(20deg);
}
.pic3{
top:30px;
left:300px;
z-index:1;
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
transform: rotate(-15deg);
}
.pic4{
top:17px;
left:450px;
z-index:1;
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
transform: rotate(8deg);
}
.pic5{
top:30px;
left:600px;
z-index:1;
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
transform: rotate(2deg);
}
.pic6{
bottom:40px;
left:50px;
z-index:1;
-webkit-transform:rotate(-7deg);
-moz-transform:rotate(-7deg);
transform: rotate(-7deg);
}
.pic7{
bottom:10px;
left:200px;
z-index:1;
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
transform: rotate(10deg);
}
.pic8{
bottom:10px;
left:350px;
z-index:1;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
transform: rotate(20deg);
}
.pic9{
bottom:10px;
left:600px;
z-index:1;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
transform: rotate(-5deg);
}

html+css照片墙的更多相关文章

  1. CSS照片墙

    <!doctype html><html><head><meta charset="utf-8"><title>CSS照 ...

  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. oracle 查看删除重复数据

    1.查询重复数据select * from 表名 where 重复字段(一般为主键)in (select 重复字段 from 表名 group by 重复字段 having count(WF_OID) ...

  2. STL 2—迭代器相关运算——advance(),distance(),next(),prev()

    迭代器的头文件中定义了4个实现迭代器模板的函数模板. 1.advance(iterator,num):将迭代器iterator 移动了num个位置 2.distance(iterator1,itera ...

  3. C#抽象类与抽象方法--就是类里面定义了函数而函数里面什么都没有做的类

    看一下代码应该就可以了 using System; using System.Collections.Generic; using System.Linq; using System.Text; na ...

  4. mysql show profiles 使用分析sql 性能

    Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后. 查看一下我的数据库版本 MySQL> Select  version(); +-------- ...

  5. Android之基于小米天气的天气源库

    大概去年的这个时候,有跟大家分享简洁天气这个应用. 该应用一開始使用的是中国天气网的数据,可是,由于须要反复多次请求server获取信息才干满足我们的需求,因此.后来我偷偷的将天气源更换成" ...

  6. MapReduce -- TF-IDF

    通过MapReduce实现 TF-IDF值的统计 数据:文章ID 文件内容 今天约了姐妹去逛街吃美食,周末玩得很开心啊! ...... ...... 结果数据: 开心:0.28558719539400 ...

  7. mysql事务，select for update，及数据的一致性处理

    在MySQL的InnoDB中,预设的Tansaction isolation level 为REPEATABLE READ(可重读) 在SELECT 的读取锁定主要分为两种方式: SELECT ... ...

  8. scala-数组操作

    package com.bigdata import scala.collection.mutable.ArrayBuffer object ArrayO { def main(args: Array ...

  9. 2017-2018-2 20155203《网络对抗技术》Exp2 后门原理与实践

    基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 通过下载带后门的程序或者点开带有后门的软件,或者后门本身就在我的系统里: (2)例举你知道的后门如何启动起来(win及linux) ...

  10. Exp2 MAL_后门原理与实践 20155214

    目录 Exp2 MAL_后门原理与实践 实验内容 通过nc反向连接创建后门 meterpreter应用 主要思路 知识点 启发 Exp2 MAL_后门原理与实践 本次实验操使用nc实现win,mac, ...