临近毕业了，一大波毕业照又要来袭了！如何使用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. CSS3弹性伸缩布局（上）——box布局

    布局简介 CSS3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box)用来提供一个更加有效的方式实现响应式布局. 由于这种布局还处于W3C的草案阶段,并且它分为 ...

  2. TFS下载文件已损坏问题

    近日在把一个数千人使用的TFS环境进行机房迁移时,从现有的服务器集群中整体迁移到另外一个服务器集群中,经过周密的设计迁移方案,充分验证方案中的各个关键过程,最终在几乎对数千人用户完全透明,没有任何感知 ...

  3. python3 selenium 鼠标悬停操作

    使用场景: 测试过程中有些元素隐藏在某些元素下面,需要鼠标悬停,才会看到 使用方法: # 定位元素hover_element = driver.find_element_by_css_selector ...

  4. trait技术详解,这次包你学得会

    trait的使用技巧trait是php5.4以后新增加的一个功能,可以将多个类中,共用的一些属性和方法提取出来做来公共trait类,就像是装配汽车的配件,如果你的类中要用到这些配件,就直接用use导入 ...

  5. 一个栗子上手CSS3动画

    最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往MDN 在开始栗子前,我们先补补基础知识. css3动画分 ...

  6. 面向对象设计（Object-Oriented Design，OOD）

    前言 OOD简介 Shubho:亲爱的,让我们开始学习OOD吧.你了解面向对象原则吗? Farhana:你是说封装,继承,多态对吗?我知道的. Shubho:好,我希望你已了解如何使用类和对象.今天我 ...

  7. Spring-web中的web.xml为Servlet提供的配置选项说明

    配置Servlet时可以设置的一些初始化参数,总结如下: ContextAttribute: 在ServletContext的属性中,要用作WebApplicationContext的属性名称. Co ...

  8. 【转】典型的JavaScript面试题

    问题1: 作用域(Scope) (function() { "use strict"; var a = b = 5; })(); console.log(b); 控制台(conso ...

  9. How to parse project properties or how to parse files with key-value pair

    If a file has content like raven.enabled = false raven.host = "localhost" raven.port = 808 ...

  10. HTML5&CSS3读书笔记

    Hi All, 分享一下我学HTML5 摘抄的读书笔记(我用的还是英文,因为一些新的东西还是来自于欧美国家,希望大家习惯于看一些英文材料): 1. Difference between Section ...