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 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
html5清空画布方法(三种)
Oct 16 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php 破解防盗链图片函数
2008/12/09 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
javascript 的Document属性和方法集合
2010/01/25 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
js实现聊天对话框
2020/02/08 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python找出因数与质因数的方法
2019/07/25 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
即兴演讲稿
2014/01/04 职场文书
公司接待方案
2014/03/08 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
文案策划求职信
2014/04/14 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
决心书格式范文
2015/09/23 职场文书