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 按条件删除、查询表

    ---查询表的名称,字段信息以及字段注释 select us.table_name, --表名   ut.COLUMN_NAME,--字段名称 uc.comments,--字段注释 ut.DATA_T ...

  2. ping和telnet

    ping命令 验证IP的可达性 本地ping虚拟机中的ip地址: telnet命令 验证服务的可用性,某个端口是否打开 连接到服务器的端口上: 几种场景: (1)ping通,telnet不行 ip地址 ...

  3. PAT A1007 Maximum Subsequence Sum （25 分）——最大子列和，动态规划

    Given a sequence of K integers { N​1​​, N​2​​, ..., N​K​​ }. A continuous subsequence is defined to ...

  4. kettle（一） 安装全过程

    windows 10 环境 所有资料下载 https://pan.baidu.com/s/1vYZVJ3f0QJHsCWiupSp08A 一.下载kettle pdi-ce-7.1.0.0-12.zi ...

  5. 第43章 RTC—实时时钟

    第43章     RTC—实时时钟 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fireg ...

  6. Android APK 签名比对（转）

    Android apk签名的过程 1. 生成MANIFEST.MF文件: 程序遍历update.apk包中的所有文件(entry),对非文件夹非签名文件的文件,逐个生成SHA1的数字签名信息,再用Ba ...

  7. jQuery.bsgrid

    http://thebestofyouth.com/bsgrid/ 支持json.xml数据格式,皮肤丰富并且容易定制,支持表格编辑.本地数据.导出参数构建等实用便捷的功能,容易扩展,更拥有丰富的示例 ...

  8. 2017-2018 Exp8 Web基础 20155214

    目录 Exp8 Web基础 实验内容 建站过程 SQL注入 知识点 Exp8 Web基础 实验内容 实验环境 主机 Kali 靶机 Kali 实验工具 后台语言 'PHP' 服务器 'Apache' ...

  9. 20155238 2016-2017-2 《JAVA程序设计》第十周学习总结

    教材学习内容总结 # Java计算机网络基础 计算机网络 计算机网络是通过传输介质.通信设施和网络通信协议,把分散在不同地点的计算机设备互连起来,实现资源共享和数据传输的系统.网络编程就就是编写程序使 ...

  10. 实验八 Web基础

    实验八 Web基础 1.安装apache sudo apt-get install apache2 2.启动apache service apache2 start 3.使用 netstat -tup ...