search

Home >Web Front-end >HTML Tutorial >Pure CSS3 implementation of image wall_html/css_WEB-ITnose

Pure CSS3 implementation of image wall_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:43:241102browse

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>

    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); }
    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
    • Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：label's for attribute_html/css_WEB-ITnoseNext article：label's for attribute_html/css_WEB-ITnose

    Related articles

    See more