临近毕业了，一大波毕业照又要来袭了！如何使用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. CSS预处理语言——less与sass的使用

    我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动 ...

  2. 0基础搭建Hadoop大数据处理-初识

    在互联网的世界中数据都是以TB.PB的数量级来增加的,特别是像BAT光每天的日志文件一个盘都不够,更何况是还要基于这些数据进行分析挖掘,更甚者还要实时进行数据分析,学习,如双十一淘宝的交易量的实时展示 ...

  3. selenium + python 登录页面，输入账号、密码，元素定位问题

    示例简介: 要求:登录QQ邮箱,输入账号.密码 出现问题:页面中含有iframe框架,因此直接进行元素的查找与操作,出现找不到元素的现象,首先需进行iframe框架的转换,使用switch_to_fr ...

  4. 「七天自制PHP框架」第三天：PHP实现的设计模式

    往期回顾:「七天自制PHP框架」第二天:模型与数据库,点击此处 原文地址:http://www.cnblogs.com/sweng/p/6624845.html,欢迎关注:编程老头 为什么要使用设计模 ...

  5. scala 异常处理机制

    有经验的码农都知道,程序开发的差不多的时候,为了提高程序的稳健性,是一定要加上异常处理机制的 在scala中,用try/catch/finally实现该功能,这个在我的博客,数字转汉字小工具中有体现, ...

  6. [js笔记整理]正则篇

    一.正则基本概念 1.一种规则.模式 2.强大的字符串匹配工具 3.在js中常与字符串函数配合使用 二.js正则写法 正则在js中以正则对象存在: (1)var re=new RegExp(正则表达式 ...

  7. Python实现RNN

    一般的前馈神经网络中, 输出的结果只与当前输入有关与历史状态无关, 而递归神经网络(Recurrent Neural Network, RNN)神经元的历史输出参与下一次预测. 本文中我们将尝试使用R ...

  8. 使用Redis实现分布式锁

    在天猫.京东.苏宁等等电商网站上有很多秒杀活动,例如在某一个时刻抢购一个原价1999现在秒杀价只要999的手机时,会迎来一个用户请求的高峰期,可能会有几十万几百万的并发量,来抢这个手机,在高并发的情形 ...

  9. Mac OS 安装 Git 环境

    1. 在mac的终端上,输入git会提示安装git软件,确认安装.安装完成后打开终端,使用git --version或者which git命令查看安装版本,有就是安装成功了. 2. 创建一个全局用户名 ...

  10. centos6.5 修改java环境变量

    [root@m1 ~]# cat /etc/profile export JAVA_HOME=/usr/local/soft/jdkexport PATH=$JAVA_HOME/bin:$PATH e ...