预赛

  • 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. 9.4 Binder系统_驱动情景分析_服务使用过程

    5. 服务使用过程 test_client进程: 用户态: (1)已结获得了“hello”服务,handle=1; (2)构造数据:code(那个函数)和函数参数 (3)发送ioctl后进入内核态,先 ...

  2. UIButton UIBarButtonItem用法

    #pragma mark 快速创建一个item - (UIBarButtonItem *)itemWithNormal:(NSString *)normal highlighted:(NSString ...

  3. swift开发网络篇 - post 请求

    /** 所有网络请求,统一使用异步请求! 在今后的开发中,如果使用简单的get/head请求,可以用NSURLConnction异步方法 GET查/POST增/PUT改/DELETE删/HEAD GE ...

  4. HDMI ARC功能详解及应用介绍

    http://www.icpcw.com/Parts/Peripheral/Skill/3260/326044_2.htm [电脑报在线]很多用户和读者购买了电视以后,都发现自己电视的HDMI接口上经 ...

  5. 经验总结56--mybatis返回主键

    使用mybatis框架时,有时候须要新插入的数据的主键是多少. 1.oracle 因为oracle是建的序列文件,获取ID值. <insert id="insert" par ...

  6. ViewChild与ContentChild的联系和区别

    原文 https://www.jianshu.com/p/5ab619e576ea 大纲 1.认识ViewChild 2.认识ContentChild 3.ViewChild与ContentChild ...

  7. redis文档翻译_key设置过期时间

    Available since 1.0.0.    使用開始版本号1.01 Time complexity: O(1)  时间复杂度O(1) 出处:http://blog.csdn.net/colum ...

  8. css3-8 内外边距中的注意要点有哪些

    css3-8 内外边距中的注意要点有哪些 一.总结 一句话总结:padding,border都是外延的.margin会合并. 1.两元素样式都有margin:15px,他们中间的距离是15px还是30 ...

  9. [RxJS] Use RxJS mergeMap to map and merge high order observables

    Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap( ...

  10. 注册表 Run、RunOnce 浅析

    绝大多数使用过 Windows 操作系统的用户都不会对注册表的 Run.RunOnce 键值感到陌生,但你真的了解所有这些键值的细节吗?让我们具体说来. 本文在Win2000,WinXp.Vista. ...