Home > Article > Web Front-end > CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose
CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:041535browse
目标：实现照片墙布局和鼠标经过图片时的动画效果
涉及知识点：CSS3的动画、过渡、变形（缩放），绝对定位与相对定位
疑点：绝对定位与相对定位对页面元素显示层次的影响
参考极客学院布道师iwen的课程
源码??
html部分：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link type="text/css" href="picwall.css" rel="stylesheet"></head><body> <div class="con"> <img class="pic pic25" src="img/25.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic26" src="img/26.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic27" src="img/27.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic28" src="img/28.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic29" src="img/29.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic30" src="img/30.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic31" src="img/31.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic32" src="img/32.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic33" src="img/33.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic34" src="img/34.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic35" src="img/35.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > <img class="pic pic36" src="img/36.jpg" alt="CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose" > </div></body></html>CSS部分(picwall.css)：
*{ margin: 0px;}body{ background-color: gainsboro;}.con{ width: 960px; height: 450px; margin: 50px auto; /*position: relative;*/}.pic{ width: 130px; padding: 10px; /*position: relative;*/}.con img{ /*padding:10px 10px 15px ;*/ /*border: 1px solid #aaaaaa;*/ /*box-shadow: 2px 2px 2px rgba(60,60,60,0.5);*/ /*position: absolute;*/ z-index: 1; transition: all 0.6s ease-in;}.con img:hover{ z-index: 2;/*实现鼠标经过时图片置于顶层，但这要求img里使用绝对定位 相应的每个图片的位置也要重新修改*/ transform: rotate(0deg) scale(1.2);}.pic25{ left: 10px; top: 0px; transform: rotate(-6deg); -webkit-transform: rotate(-6deg);/*chrome浏览器适配*/}.pic26{ left: -2px; top: 10px; transform: rotate(0deg); /*此处应该加上浏览器适配，默认使用chrome浏览器测试，后面同样*/}.pic27{ left: 2px; top: 0px; transform: rotate(-16deg);}.pic28{ left: -2px; top: 0px; transform: rotate(-6deg);}.pic29{ left: 10px; top: 20px; transform: rotate(20deg);}.pic30{ left: 10px; top: 0px; transform: rotate(-6deg);}.pic31{ left: 10px; top: 0px; transform: rotate(-6deg);}.pic32{ left: 10px; bottom: -7px; transform: rotate(16deg);}.pic33{ left: 10px; top: 0px; transform: rotate(-6deg);}.pic34{ left: 3px; top: 10px; transform: rotate(3deg);}.pic35{ left: 10px; top: 0px; transform: rotate(-16deg);}.pic36{ left: 20px; top: 0px; transform: rotate(10deg);}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：搜索中文关键词变为乱码，如何解决？_html/css_WEB-ITnoseNext article：基于CSS3企业招聘引导页动画特效_html/css_WEB-ITnose