临近毕业了，一大波毕业照又要来袭了！如何使用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. springcloud(一)：大话Spring Cloud

    研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...

  2. Java Web实现IOC控制反转之依赖注入

    控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...

  3. 关于quotename的用法

    首先,sqlserver里的标识符有一定的规则,比如  你 create table abc 123(...) 那么中间含有空格,它不是符合规则的. 你会写做 create table [abc 12 ...

  4. ubuntu实用命令--软件管理

    近期重新拿起linux的书看了下,整理了一下linux的命令. ubuntu预装了APT和dpkg ,“APT”是 “Advanced Package Tool”的简写,“dpkg ”是“Debian ...

  5. cctype学习

    #include <cctype>(转,归纳很好) 头文件描述: 这是一个拥有许多字符串处理函数声明的头文件,这些函数可以用来对单独字符串进行分类和转换: 其中的函数描述: 这些函数传入一 ...

  6. libpng处理png图片（一）

    一:libpng库的编译 环境:windows10 + VS2013 需要下载:libpng, zlib两个库 下载地址: libpng:http://libmng.com/pub/png/libpn ...

  7. OC点语法介绍和使用以及@property关键字

    使用"点语法" Person *p =[Person new]; //点语法 //对象.属性名 //注意,此时 (p.age)并不是直接方法实例对象 //而是xcode可能到点语法 ...

  8. Django入门笔记

    Django入门笔记 **文档包含Django安装包.学习的笔记.代码等 安装 Django参考附件,只需要把附件拷贝到你需要的目录就行.Django是1.8.16版本 Python:在附件中,其中有 ...

  9. [刷题]算法竞赛入门经典 3-10/UVa1587 3-11/UVa1588

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 题目:算法竞赛入门经典 3-10/UVa1587:Box 代码: //UVa1587 - Box #include&l ...

  10. Mongodb安装启动详解

    最近在倒腾node+mongodb,安装mongodb的时候开始遇到很多问题,然后折腾了好几次,直到可以很顺利完成安装 ,所以把安装的过程记录下来. 线上系统基本上都是linux的,所以只安装了lin ...