Pure CSS3 implementation of image wall_html/css_WEB-ITnose-HTML Tutorial-php.cn

Pure CSS3 implementation of image wall_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:24

Original

1120 people have browsed it

Preliminary knowledge

DIV CSS basics

Transform and transition usage of CSS3

Mainly using transform’s rotate/scale

Several parameters of animation transition (transition-property/transition-duration/ transition-timing-function)

CSS3 box-shadow.. Only outer shadow is used here

Worth it One thing to mention: For more attribute parameters, please consult the css manual. The only ones shown here are those that will be used;

Material acquisition

Baidu searches for image materials by itself and replaces the image path in the code below..
The pictures in the example are larger than 400 pixels and smaller than 600 pixels, most of which are 480X270

Effect description

Initialize messy image sorting (CSS control), mouse hovering will make the image display on the top level, and the image will return to horizontal Display magnification 1.5 times

Code implementation

The code contains comments

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>

Copy after login

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

Copy after login

Others

CSS prefix completion is solved by using the plug-in "autoprefix";

CSS Typesetting is solved with the plug-in "css comb";

Test browser firefox 38 / chrome 42