临近毕业了，一大波毕业照又要来袭了！如何使用CSS3属性制作出自己的网页版照片墙呢？

闲话少说，先来看看效果图

效果要求：

1，照片要求有一定的白色边框。

2，照片都要有一定的倾斜角度。

3，鼠标移动到一张照片上时，图片会旋转并摆正显示。

4，当移动到下面被遮挡的照片时，下面的照片会显示在最上层。

<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片墙效果</title>
<link href="pic.css" rel="stylesheet" />
</head>

<body>
<div class="container">
<h1>照片墙</h1>
<img src="data:images/01.jpg" class="pic1" />
<img src="data:images/02.jpg" class="pic2" />
<img src="data:images/03.jpg" class="pic3" />
<img src="data:images/04.jpg" class="pic4" />
<img src="data:images/05.jpg" class="pic5" />
<img src="data:images/06.jpg" class="pic6" />
</div>
</body>
</html>

css文件

body{
margin:0
padding:0;
background-color:#eee;
}
h1{
text-align:center;
}
.container{
width:1300px;
height:800px;
margin:60px auto;
position:relative/*使得照片定位参照容器*/
}
.container img{
background:#FFF;
padding:10px 10px 15px;
position:absolute;
box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
-moz-transition:all 0.5s ease-in;
-webkit-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
z-index:1;
}
.container img:hover{
box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
-webkit-transform:rotate(0deg) scale(1.20);
-moz-transform:rotate(0deg) scale(1.20);
transform:rotate(0deg) scale(1.20);
z-index:2;
}
.pic1{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
position: absolute;
left: 519px;
top: 121px;
}
.pic2{
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
position: absolute;
left: 212px;
top: 57px;
}

.pic3
{
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
position: absolute;
z-index: 1;
top: 55px;
right: 139px;
}

.pic4
{

-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
left:750px;
top:200px;
}

.pic5
{

-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
left: 550px;
top: 210px;
}

.pic6
{
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
position: absolute;
left: 300px;
top: 200px;
}

总结一下实现技术的关键点

1.定位position:照片外包裹层设置为relative，照片设置为absolute，使得照片定位会参照外面包裹层定位。

2，z-index属性：照片在原始摆放时会有部分重叠，当鼠标移动到上时，我们需要使得它在最上面显示，所以我们先把所有照片的z-index设置为1，当鼠标移动到时，即hover:我们把他们z-index设置成2就可以了

3，把照片公有属性定义到img{}之中，再把每张照片私有属性设置到具体每一张照片之中，如pic1{}

还在等什么，快给你女朋友做一个绚丽的照片墙吧！

使用CSS3动画实现绚丽的照片墙效果的更多相关文章

  1. 美妙的 CSS3 动画！一组梦幻般的按钮效果

    今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...

  2. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  3. css3动画的原理 及 各种效果制作

    1. 制作小球弹动效果 在这篇文章中,我们将会去探究一下浏览器是如何去处理CSS Animations和CSS Transitions的,   c 以便使你在写一些动画效果之前就可以对该动画在浏览器中 ...

  4. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  5. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  6. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  7. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  8. CSS3——动画效果

    CSS3动画在Style里面就实现了以往我们用JQ写的动画效果,着实简便了不少~ 简单Demo: html代码: <div id="dv1"></div> ...

  9. 15个让人惊讶的 CSS3 动画效果演示

    CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择.如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画. 本文收集了15个惊 ...

随机推荐

  1. MySQL AutoCommit带来的问题

    现象描述 测试中发现,服务A在得到了服务B的注册用户成功response以后,开始调用查询用户信息接口,却发现无法查询出任何结果.检查binlog发现,在查询请求之前,数据库确实已经完成了commit ...

  2. node.js—express+ejs、express+swig、

    安装:npm install -g express-generator 普通express 网站 创建:express testWeb 安装依赖:npm install 修改app.js文件并运行 找 ...

  3. 跨域问题解决方案(HttpClient安全跨域 & jsonp跨域)

    1 错误场景 今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行 都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会 ...

  4. php表单提交 图片、音乐、视频、文字，四种类型共同提交到数据库

    这个问题一直困扰了我好几天,终于在今天让我给解决了,难以掩饰的激动. 其实在之前没有接触到这种问题,只是表单提交数据而已,再就是图片,四种类型同时提交还真是没遇到过,做了一个系统,其中有一个功能就是提 ...

  5. [js笔记整理]事件篇

    一.事件流1.冒泡事件:从特定的事件到不特定事件依次触发:(由DOM层次的底层依次向上冒泡)(1)示例: <html onclick="add('html<br>')&qu ...

  6. 关于SqlServer远程跨库修改数据

    今天遇到一个需求需要修改远程服务器上的数据,如何直接修改,并且垮库,跨库简单,直接加上数据库名字,远程的话则需要创建链接服务器,具体步骤如下: --创建链接服务器  exec sp_addlinked ...

  7. [UWP]不怎么实用的Shape指南：自定义Shape

    1. 前言 这篇文章介绍了继承并自定义Shape的方法,不过,恐怕,事实上,100个xaml的程序员99个都不会用到.写出来是因为反正都学了,当作写个笔记. 通过这篇文章,你可以学到如下知识点: 自定 ...

  8. Hive 桶的分区

    (一).桶的概念: 对于每一个表(table)或者分区, Hive可以进一步组织成桶(没有分区能分桶吗?),也就是说桶是更为细粒度的数据范围划分.Hive也是 针对某一列进行桶的组织.Hive采用对列 ...

  9. SparkMLlib学习分类算法之逻辑回归算法

    SparkMLlib学习分类算法之逻辑回归算法 (一),逻辑回归算法的概念(参考网址:http://blog.csdn.net/sinat_33761963/article/details/51693 ...

  10. EMC在线测试题目及答案 绿色为正确答案，红色为错误答案

    1. 以下哪一项技术可以将IT的物理资源放在一个共享池中以及提升它们的利用率? 分区 虚拟化 协调 LUN 屏蔽 2. 哪一项是EMC的基于块-存储(block-based)的高端存储? Atmos ...