Heim  >  Artikel  >  Web-Frontend  >  CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:37:041535Durchsuche

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

涉及知识点: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