CSS3简单实现照片墙


Posted in HTML / CSS onDecember 12, 2014

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:0; padding:0;}
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: 1;}
.img2 { left:156px; top:156px; transform:rotate(-30deg); z-index: 1;}
.img3 { left:381px; top:60px; transform:rotate(30deg); z-index: 1;}
.img4 { left:458px; top:256px; transform:rotate(30deg); z-index: 1;}
.img5 { left:684px; top:110px; transform:rotate(-40deg); z-index: 1;}
img:hover { transform:rotate(0deg); transform:scale(1.5); box-shadow: 6px 6px 6px #656565; z-index: 2;}
</style>

效果图:

CSS3简单实现照片墙

HTML / CSS 相关文章推荐
CSS3弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 #HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 #HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 #HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 #HTML / CSS
CSS3动画效果回调处理详解
Dec 10 #HTML / CSS
CSS3属性background-size使用指南
Dec 09 #HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 #HTML / CSS
You might like
php 不同编码下的字符串长度区分
2009/09/26 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php字符串分割函数用法实例
2015/03/17 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
js常用代码段整理
2011/11/30 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python opencv实现简易画图板
2020/08/27 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
美德好少年事迹材料
2014/01/19 职场文书
个人党性剖析材料
2014/02/03 职场文书
十八大感想感言
2014/02/10 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
浅析Python实现DFA算法
2021/06/26 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers