CSS3简单实现照片墙
HTML
复制代码代码如下:
照片墙制作
CSS(此处省略了浏览器私有属性前缀!)
复制代码代码如下:
* {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;}
效果图：
相关阅读:
Windows 10正式版在美国新蛋提前开卖
Android封装的http请求实用工具类
给VMware虚拟机中的CentOS分区扩容的操作笔记
可插入图片的TEXT文本框
PHP 7.0.2 正式版发布
C#使用委托(delegate)实现在两个form之间传递数据的方法
js的image onload事件使用遇到的问题
android系统在静音模式下关闭camera拍照声音的方法
Win7系统下禁止在桌面上创建文件夹的方法
Jquery实现显示和隐藏的4种简单方式
Android控件之RatingBar自定义星级评分样式
VC++操作SQLite简单实例
php selectradio和checkbox默认选择的实现方法详解
Win10自带游戏屏幕录制功能：Xbox应用轻松实现
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
