Heim >Web-Frontend >HTML-Tutorial >CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose
CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:041564Durchsuche
目标：实现照片墙布局和鼠标经过图片时的动画效果
涉及知识点：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);}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：搜索中文关键词变为乱码，如何解决？_html/css_WEB-ITnoseNächster Artikel：基于CSS3企业招聘引导页动画特效_html/css_WEB-ITnose