CSS3简单实现照片墙
2014-12-12 14:54
441 查看
HTML
CSS(此处省略了浏览器私有属性前缀!)
效果图:
<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实现炫酷读者墙
- css3和jQuery实现一个简单的标签页效果
- 使用简单的CSS3属性实现炫酷读者墙效果
- 超简单CSS3实现圆角、阴影、透明效果
- Gallery和ImageSwitcher滑动切换照片简单demo实现
- PS入门教程:简单实现照片切换动画
- CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
- css3元素简单的闪烁效果实现(html5 jquery)
- 仿网易聚合新闻 - 超简单实现 - 刷新按钮CSS3旋转效果
- CSS3 实现的一个简单的"动态主菜单" 示例[转]
- css3实现带有简单动画按钮导航
- Textillate.js – 实现动感的 CSS3 文本动画的简单插件
- css3简单练习实现遨游浏览器logo的绘制
- 简单使用CSS3实现炫酷读者墙效果
- 冒泡动画按钮的简单实现(使用CSS3)
- CSS3transition实现的简单动画菜单
- 纯css3无js实现的Android Logo(有简单动画)
- CSS3 border-radius简单实现涂鸦风格边框
- CSS3实现的简单下拉框菜单
- 使用 CSS3 伪元素实现立体的照片堆叠效