CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose-html教程-PHP中文网

CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:37:04

原创

1825人浏览过

目标：实现照片墙布局和鼠标经过图片时的动画效果

涉及知识点：CSS3的动画、过渡、变形（缩放），绝对定位与相对定位

疑点：绝对定位与相对定位对页面元素显示层次的影响

参考极客学院布道师iwen的课程

立即学习“前端免费学习笔记（深入）”；

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

源码??

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);}

登录后复制