预赛

  • 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

版权声明：本文博主原创文章，博客，未经同意不得转载。

纯洁CSS3实现图片墙的更多相关文章

  1. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  2. jQuery/CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  3. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  4. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  5. css3实现图片旋转效果

    css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用. =============== 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) s ...

  6. css3 实现图片等比例放大与缩小

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  7. CSS3实现图片木桶布局

    CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...

  8. 纯css3实现图片三角形排列

    当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览    ...

  9. SharePoint 2013 App 示例之图片墙

    应用程序实质上是 Web 应用程序.如果您知道如何生成 Web 应用程序,则您就知道如何生成 SharePoint 相关应用程序.您可以使用任何语言,如 HTML.JavaScript.PHP 或 . ...

随机推荐

  1. 【Codeforces Round #435 (Div. 2) C】Mahmoud and Ehab and the xor

    [链接]h在这里写链接 [题意] 让你组成一个n个数的集合,使得这n个数的异或和为x; x<=1e5 每个数最大1e6; [题解] 1e5<=2^17<=2^18<=1e6的 ...

  2. C++ BYTE数组转字符串

    第一种情况: BYTE[0]=Ox12 BYTE[1]=0x34 BYTE[2]=0x56 最后要转换成字符串123456 另外一种情况: BYTE[0]=Ox12 BYTE[1]=0x34 BYTE ...

  3. 【EasyUi】页面设计必学之Layout

    接触EasyUi也快一年了.非常多时候都把重心放在实现功能方面.要显示大量数据了就用DataGrid,要实现分页效果了就想着Tabs,如此等等,再接下来就是考虑CSS.js怎样让这个功能实现的更好. ...

  4. 用Java将字符串的首字母转换大小写

    在项目开发的时候会需要统一字符串的格式,比如首字母要求统一大写或小写,那用Java如何实现这一功能?下面一起来学习学习. 话不多说,直接上代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 ...

  5. php课程 2-7 php中常量如何定义

    php课程 2-7 php中常量如何定义 一.总结 一句话总结:函数方式定义和普通变量方式定义    define('PI','3.14').键值对,和session一样.    const PI=3 ...

  6. python3的函数

    #摘自廖雪峰的程序教程 函数名是变量: 如abs()是一个求绝对值的函数, >>> x = abs(-10) >>> x 10 变量可以指向函数 用f指向函数abs ...

  7. 【u249】新斯诺克

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 斯诺克又称英式台球,是一种流行的台球运动.在球桌上,台面四角以及两长边中心位置各有一个球洞,使用的球分 ...

  8. [Javascript] Validate Data with the Every() Method

    The every method returns true or false based on whether or not every item in the array passes the co ...

  9. 一段代码的疑问（1）——unsigned与signed

    现象: 先来看一段代码: 这段代码的输出结果是: -84 4294967264 分析: xiaoqiang@dev:~/cpp$ g++ -g c212.cc -o temp xiaoqiang@de ...

  10. 【35.02%】【codeforces 734A】Vladik and flights

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...