纯CSS3实现图片墙

来源：互联网发布：定时自动打电话软件编辑：程序博客网时间：2024/04/29 09:11

预备知识

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

0 0