纯洁CSS3实现图片墙
2015-09-29 12:03
579 查看
预赛
DIV+CSS基金会CSS3的transform 和 transition说明
主要用于transform的rotate/scale
动画过渡的几个參数(transition-property/transition-duration/ transition-timing-function)
CSS3的box-shadow..这里仅仅用到外阴影
值得一提的:很多其它属性的參数要查询css手冊,这里展示仅仅是会用到的;
素材获取
百度自行搜索图片素材,替换以下代码的图片路径就可以..样例中的图片大于400像素小于600像素,当中480X270居多
效果描写叙述
初始化凌乱的图片排序(CSS控制),鼠标悬浮会让图片处于顶层显示,且图片恢复水平展示+放大1.5倍代码实现
代码内含凝视index.html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3实现照片墙</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>纯CSS3实现照片墙</h1> <div id="container"> <img class="position_pic1" src="img/1.jpg" alt="这是一个美眉的图片"> <img class="position_pic2" src="img/2.jpg" alt="这是一个美眉的图片"> <img class="position_pic3" src="img/3.jpg" alt="这是一个美眉的图片"> <img class="position_pic4" src="img/4.jpg" alt="这是一个美眉的图片"> <img class="position_pic5" src="img/5.jpg" alt="这是一个美眉的图片"> <img class="position_pic6" src="img/6.jpg" alt="这是一个美眉的图片"> <img class="position_pic7" src="img/7.jpg" alt="这是一个美眉的图片"> <img class="position_pic8" src="img/8.jpg" alt="这是一个美眉的图片"> </div> </body> </html>
style.css
* { margin: 0; padding: 0; border: 0; outline: 0; } /*简易版reset*/ h1 { text-align: center; } /*文字居中*/ #container { position: relative; width: 1200px; margin: 0 auto; } /*块居中*/ #container img { position: absolute; z-index: 1; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: all; transition-property: all; border: 5px solid #eee; box-shadow: 2px 2px 2px rgba(0, 0, 0, .5); } /* 给图片加入一个小阴影(外阴影)及添加边框 这里的transition分开參数来写,方便小伙伴们理解.当然也能够用简写方式: eg: tansition:all 0.5 ease-out position在这里的作用是为了偏移图片位置的,,后面能够看到为何 z-index是为了图片堆叠的排放,,这里为1,hover那里为2(效果即为底层图片第一张显示) */ #container img:hover { z-index: 200; -webkit-transform: rotate(0deg); -webkit-transform: scale(1.5); -ms-transform: rotate(0deg); -ms-transform: scale(1.5); transform: rotate(0deg); transform: scale(1.5); border: 5px solid #eee; box-shadow: 10px 10px 10px rgba(0, 0, 0, .5); } /* 这一块是让图片在hvoer下的图形变换,水平展示及放大1.5倍; transform也能够简写的: eg: transform:rotate(90deg) scale(1); */ /*以下这些子类都是来定位图片初始位置及旋转角度的*/ .position_pic1 { top: 100px; left: 5px; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .position_pic2 { top: 200px; left: 600px; -webkit-transform: rotate(-12deg); -ms-transform: rotate(-12deg); transform: rotate(-12deg); } .position_pic3 { top: 20px; left: 400px; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } .position_pic4 { top: 400px; left: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .position_pic5 { top: 400px; left: 500px; -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .position_pic6 { top: 500px; right: 50px; -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); } .position_pic7 { top: 600px; left: 250px; -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } .position_pic8 { top: 200px; right: 600px; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); }
其它
CSS前缀是补全是用插件”autoprefix”解决;CSS排版的是用插件”css comb”解决;
測试浏览器firefox 38 / chrome 42
相关文章推荐
- (转载) css实现小三角(尖角)
- 目前流行的CSS+DIV的命名规则
- 使用CSS3的::selection改变选中文本颜色的方法
- IE浏览器下常见的CSS兼容问题
- CSS-3 Animation 的使用
- css3之BFC、IFC、GFC和FFC
- c#开发之一---前端技术html/css
- css样式之边框和内外边距
- css3弹性盒子
- DIV+CSS排版实用技巧
- CSS float浮动的深入研究、详解及拓展(二)
- CSS3 border-radius属性
- css3 旋转 过渡 实例
- 【css】day04_列表样式_显示方式_鼠标形状
- 【css】day03_文本格式化_表格样式_定位
- CSS样式之背景图片
- 属性选择器设置表单样式
- CSS3基础总结
- 9.28 CSS3 弹性盒模型
- CSS float浮动的深入研究、详解及拓展(一)