HTML

 <body>

     <h2>照片墙制作</h2>

     <div class="container">

         <img class="img1" src="img/img (1).jpg" height="150" width="150" alt="">

         <img class="img2" src="img/img (2).jpg" height="160" width="200" alt="">

         <img class="img3" src="img/img (3).jpg" height="170" width="200" alt="">

         <img class="img4" src="img/img (4).jpg" height="240" width="200" alt="">

         <img class="img5" src="img/img (5).jpg" height="300" width="300" alt="">

     </div>

 </body>

CSS(此处省略了浏览器私有属性前缀!)

 <style>

         * {margin:; padding:;}

         body { background-color: #eee; padding-top: 50px;}

         h2 { text-align: center;}

         .container { position: relative; width:1000px; height:700px; margin:0px auto; }

         img { position: absolute; top:50px; left:100px; cursor: pointer;

             padding:10px 10px 25px; background-color: #fff; border:1px solid #ddd;

             transition:0.5s; box-shadow: 3px 3px 3px #ccc;

         }

         .img1 {    left:40px;    top:20px;    transform:rotate(30deg);    z-index:;}

         .img2 {    left:156px;    top:156px;    transform:rotate(-30deg);    z-index:;}

         .img3 {    left:381px;    top:60px;    transform:rotate(30deg);    z-index:;}

         .img4 {    left:458px;    top:256px;    transform:rotate(30deg);    z-index:;}

         .img5 {    left:684px;    top:110px;    transform:rotate(-40deg);    z-index:;}

         img:hover {    transform:rotate(0deg);    transform:scale(1.5);    box-shadow: 6px 6px 6px #656565; z-index:;}

</style>

SHOW

CSS3 照片墙的更多相关文章

  1. css3照片墙+曲线阴影

    css3照片墙+曲线阴影 最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...

  2. css3照片墙

    一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...

  3. jQuery CSS3 照片墙

    <html> <head> <style type="text/css"> .picture-wall-container{ position: ...

  4. CSS3制作漂亮的照片墙

    CSS3可以做动画大家肯定都是耳熟能详的了,但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢? 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧! 第一部分:HTML 这里我们 ...

  5. 使用CSS3动画实现绚丽的照片墙效果

    临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图 效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...

  6. CSS3 简易照片墙

    代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...

  7. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  8. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

  9. CSS3伸缩盒Flexible Box

    这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

随机推荐

  1. Unable to execute dex: Multiple dex files define 解决方法

    程序编译正常,在用Eclipse调试执行时,报错Unable to execute dex: Multiple dex files define: 方法:      原因是有重复的.jar被引用,可以 ...

  2. uC/OS-III学习2：:uC/OS-III LED闪烁实验

    1 前言: 看完了uC/OS-III的基本介绍之后,大致对这个操作系统有了点了解,但真正的理解还是要通过不断的去使用,在使用中体验uC/OS-III的乐趣和更深的理解其工作原理是非常重要的.因此,我在 ...

  3. .NET企业轻量级开发框架（APS.NET+Spring.Net+NHibernate）

          在<企业级应用架构>系列文章发表之余,也得到了许多同行的反馈,有人说这套框架太重了或者技术学习太复杂了或者初学者不太好理解或者完全颠覆了传统APS.NET开发模式让人望而生畏. ...

  4. [ES6] 12. Shorthand Properties in ES6

    Where destructuring in ES6 allows you to easily get properties out of an object, this shorthand prop ...

  5. windows下查看某个端口被哪个程序占用的方法

    经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口,很多人都比较头疼,下面就介绍一种非常简单的方法,希望对大家有用 假如我们需要确定谁占用了我们的9050端口 ...

  6. 什么是mysql中的元数据

    一:什么是元数据? 所谓元数据,就是表示数据的数据,这些数据五花八门,总之,只要不是我们存储到数据库里的数据,大多都可以理解为元数据.描述数据库的任何数据—作为数据库内容的对立面—是元数据.因此,列名 ...

  7. ClamAV

    ClamAV 简介以及适用范围 ClamAV是一个在命令行下查毒软件,因为它不将杀毒作为主要功能,默认只能查出您计算机内的病毒,但是无法清除,至多删除文件.ClamAV可以工作很多的平台上,但是有少数 ...

  8. Makefile中指示符“include”、“-include”和“sinclude”的区别

    转:http://www.cnblogs.com/xmphoenix/archive/2012/02/22/2363335.html 指示符“include”.“-include”和“sinclude ...

  9. LeetCode39 Combination Sum

    题目: Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C  ...

  10. 3.5html学习笔记之框模型，盒子模型

    块元素:block 两个相邻的元素外边距,两者之间取最大. 浮动(定位机制针对框来说): 1.position:absolute,relative,fixed 1)relative:在原来的位置上进行 ...