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 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
浅谈node的事件机制
2017/10/09 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python绘制组合图的示例
2020/09/18 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
教师旷工检讨书
2014/01/18 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
公司合作协议范文
2014/10/01 职场文书
初中历史教学反思
2016/02/19 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android