CSS照片墙
<!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>
最新文章
- WCF实现事件通知相关应用技巧介绍
- GroupBy(..)的四种声明方式的理解及调用
- Mac 效率工具
- cf 732c
- KendoUI之kendoGrid服务端分页
- imx6 uboot lcd
- selenium和Firefox版本不兼容
- Android ListView高度自适应和ScrollView冲突解决
- mysql 区间锁 对于没有索引 非唯一索引 唯一索引 各种情况
- 强密码和弱密码并没有什么区别？NIST密码安全标准更新：不再建议密码要求混合大写字母、字符和数字
- NOIWC2018 游记
- win10下安装mysql5.7.25版本
- Aooms_微服务基础开发平台实战_003_配置文件与简单的web环境搭建
- WLST
- LibHaru编译使用
- 将数据库select出来的数据转化为与相应databean相应的字典
- storyboard貌似不错
- iOS开发Swift篇—（七）函数
- Hibernate之openSession与getCurrentSession的区别
- sqlmap注入教程