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. Spark项目之电商用户行为分析大数据平台之（十一）JSON及FASTJSON

    一.概述 JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式.XML也是一种数据交换格式, ...

  2. shiro实战系列(十三)之单元测试

    由于我们已经涉及到了 Subject reference,我们知道 Subject 是“当前执行”用户的特定安全视图,且该 Subject 实 例绑定到一个线程来确保我们知道在线程执行期间的任何时间是 ...

  3. NodeHandles

    os::NodeHandle类有两个作用: 第一.它在roscpp程序内提供了一种RAII(Resource Acquisition Is Initialization)类型式启动和关闭内部节点的方法 ...

  4. dom4j加载xml文件

    ## dom4j加载xml文件 ``` // 1. 加载xml文件 InputStream is = MyTest.class.getResourceAsStream("user.xml&q ...

  5. mybatis的一对一，一对多查询，延迟加载，缓存介绍

    一对一查询 需求 查询订单信息关联查询用户信息 sql语句 /*通过orders关联查询用户使用user_id一个外键,只能关联查询出一条用户记录就可以使用内连接*/ SELECT orders.*, ...

  6. C. Sad powers

    You're given Q queries of the form (L, R). For each query you have to find the number of such x that ...

  7. 几个PHP读取整个文件的函数readfile()、fpassthru()和file()

    2.7.4   读取整个文件:readfile().fpassthru()和file()除了可以每次读取文件一行外,还可以一次读取整个文件.PHP提供了4种不同的方式来读取整个文件.第一种方式是rea ...

  8. 第40章 CAN—通讯实验—零死角玩转STM32-F429系列

    第40章 CAN—通讯实验—零死角玩转STM32-F429系列   第40章     CAN—通讯实验 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视 ...

  9. Dozer 使用小结

    这篇文章是本人在阅读Dozer官方文档(5.5.1版本,官网已经一年多没更新了)的过程中,整理下来我认为比较基础的应用场景. 本文中提到的例子应该能覆盖JavaBean映射的大部分场景,希望对你有所帮 ...

  10. 网络对抗技术 2017-2018-2 20155215 Exp9 Web安全基础

    1.实践过程 前期准备:WebGoat WebGoat分为简单版和开发板,简单版是个Java的Jar包,只需要有Java环境即可,我们在命令行里执行java -jar webgoat-containe ...