CSS3 照片墙

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 照片墙的更多相关文章

css3照片墙+曲线阴影
css3照片墙+曲线阴影最近在学习jquery,晚上想复习下以前学过的知识,看到网上有关于css3照片墙的,感觉挺好玩的,就做了做.(以下图片均来自网络) 一.css3照片墙 html部分: < ...
css3照片墙
一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...
jQuery CSS3 照片墙
<html> <head> <style type="text/css"> .picture-wall-container{ position: ...
CSS3制作漂亮的照片墙
CSS3可以做动画大家肯定都是耳熟能详的了,但是大家有木有巧妙的利用这一个功能来制作一款漂亮的照片墙呢? 那么今天我们就利用CSS3动画这一特性来一起制作漂亮的照片墙吧! 第一部分:HTML 这里我们 ...
使用CSS3动画实现绚丽的照片墙效果
临近毕业了,一大波毕业照又要来袭了!如何使用CSS3属性制作出自己的网页版照片墙呢? 闲话少说,先来看看效果图效果要求: 1,照片要求有一定的白色边框. 2,照片都要有一定的倾斜角度. 3,鼠标移动 ...
CSS3 简易照片墙
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理
承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...
CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

随机推荐

Ehcache（09）——缓存Web页面
http://haohaoxuexi.iteye.com/blog/2121782 页面缓存目录 1 SimplePageCachingFilter 1.1 calculate ...
iOS上传文件，有关http上传协议-RFC1867
以上是抓包HTML input file标签上传的内容只要模拟上面http 的header跟body就可以成功. 整体说明: post 上传文件时,以在http body里面带参数,参数的格式,根据 ...
关于android 图像格式问题
这算是篇总结吧.6月份开始做的一个android上的ar项目结束了.我做的部分是二维码识别和图像识别的预处理.这个项目虽然很累,但是让我学到了很多东西,特别是严格的编码规则,和java代码的效率优化, ...
今天弱爆了,svn创建项目
今天弱爆了 1.再svnRoot下新建你要建的项目名如:hqdj 文件夹,然后选中它点击右键选中create repository here... ,选择文件系统类型 2.进入conf文件夹进行配置 ...
iOS开发——使用技术OC篇&简单九宫格锁屏功能的实现与封装
简单九宫格锁屏功能的实现与封装首先来看看最后的实现界面. 在这开始看下面的内容之前希望你能先大概思考活着回顾一下如果你会怎么做,只要知道大概的思路就可以. 由于iphone5指纹解锁的实现是的这个 ...
oracle db打one-off-patch 一例
由于EBS form界面有一个报错,是一个小bug,以下打一个小patch修补一下. [以下的过程没有停库] 解压p8496830_111070_Linux-x86-64.zip cd 8496830 ...
IDEA加密（转）
1. 简介 IDEA是International Data Encryption Algorithm 的缩写,是1990年由瑞士联邦技术学院来学嘉X.J.Lai 和Massey提出的建议标准算法称作P ...
【转】如何使用KeyChain保存和获取UDID
本文是iOS7系列文章第一篇文章,主要介绍使用KeyChain保存和获取APP数据,解决iOS7上获取不变UDID的问题.并给出一个获取UDID的工具类,使用方便,只需要替换两个地方即可. 一.iOS ...
Mac上安装Tomcat服务器
1.下载Tomcat安装包,下载地址:http://tomcat.apache.org/ 选择你想要的版本,在这里我选择下载Tomcat 8 ps:你也可以使用axel多线程下载命令下载下载的速度很 ...
android stuido 在线安装svn插件，添加版本库无响应
问题:android stuido 中在线安装svn插件,添加版本库无响应. 原因: 由于android stuido 版本较高,在线安装1.6x 版本的svn,添加版本库一直没有响应,最后卡死.. ...

CSS3 照片墙

CSS3 照片墙的更多相关文章

随机推荐

热门专题