手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS3简单实现照片墙
CSS3简单实现照片墙
摘要:HTML照片墙制作CSS(此处省略了浏览器私有属性前缀!)*{margin:0;padding:0;}body{background-col...

HTML

<body>

<h2>照片墙制作</h2>

<div>

<img src="img/img (1).jpg" height="150" width="150" alt="">

<img src="img/img (2).jpg" height="160" width="200" alt="">

<img src="img/img (3).jpg" height="170" width="200" alt="">

<img src="img/img (4).jpg" height="240" width="200" alt="">

<img 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简单实现照片墙1

【CSS3简单实现照片墙】相关文章:

CSS网页布局实用小技巧

纯CSS代码实现翻页焦点图效果

使用CSS代码的空格实现中文对齐的方法

CSS3实现的闪烁跳跃进度条示例

CSS+jQuery实现的在线答题功能

CSS右对齐实现方法

8个简单实用的CSS秘诀

CSS3实现的炫酷菜单代码分享

CSS代码当前页效果的实现

CSS常用样式效果

精品推荐
分类导航