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. Failed to abandon session scope: Connection timed out

    系统log 出现  Failed to abandon session scope: Connection timed out  错误, reboot无法重启 解决办法就是让postfix只用IPv4 ...

  2. CSS居中布局

    一:水平居中方案: 1.行内元素 设置 text-align:center 2.定宽块状元素 设置 左右 margin 值为 auto 3.不定宽块状元素 a:在元素外加入 table 标签(完整的, ...

  3. Kubernetes1.91（K8s）安装部署过程（四）--Master节点安装

    再次明确下架构:  三台虚拟机 centos 7.4系统,docker为17版本,ip为10.10.90.105到107,其中105位master,接下来的master相关组件安装到此机器上. etc ...

  4. Python基础（10）——类进阶（静态方法、类方法、属性方法）

    以下方法为高级方法,一般来说没什么卵用 1.静态方法 @staticmethod 相当于把类内的函数从类内独立出来,只是名义上归类管,实际上不可以调用类内的变量和函数 通过@staticmethod装 ...

  5. Android String.xml中的符号总结

    <b></b>加粗字体 <i></i> 斜体字体 <u></u> 给字体加下划线 \n 换行 \u0020表示空格 \u2026 ...

  6. jquery的$(document).ready()与js的window.onload区别

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. RTSP server 在mips 上莫名其妙退出(PC上则无此问题)

    http://blog.csdn.net/lubing20044793/article/details/38523701 早在这篇blog以前写过,在虚拟机下调试sn9c291时,USB 数据传输出了 ...

  8. 关于EL表达式中requestScope和param区别

    今天演示EL表达式的时候发现自己jsp的基础实在是薄弱,在这个很简单的问题上迷惑了很久. 首先在看遇到的问题: 在浏览器地址输入,表示传入一个参数test,值为123 http://localhost ...

  9. net 表格控件

    一个开源的表格控件,界面像Excel,看来很好,有机会在项目中使用:ReoGrid https://reogrid.net/

  10. 20155218《网络对抗》Exp8 Web基础

    20155218<网络对抗>Exp8 Web基础 1.基础问题回答 1.什么是表单? 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等) ...