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 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 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获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php中final关键字用法分析
2016/12/07 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
js渐变显示渐变消失示例代码
2013/08/01 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
使用django实现一个代码发布系统
2019/07/18 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
大学生物业管理求职信
2013/10/24 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
检查接待方案
2014/02/27 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL