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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 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
php5数字型字符串加解密代码
2008/04/24 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
python tkinter实现屏保程序
2019/07/30 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
铁路工务反思材料
2014/02/07 职场文书
总经理任命书范本
2014/06/05 职场文书
高三毕业评语
2014/12/31 职场文书
家访教师心得体会
2016/01/23 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
Java实现聊天机器人完善版
2021/07/04 Java/Android