预赛

  • 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. 如何在Win8/Win10上开启 dotNetFramework 2.0/3.5 功能

    问题: 在Windows 8.Windows 10上安装一些软件时,系统可能会报出如下错误:你的电脑上的应用需要使用以下Windows功能:     解决方式:   首先呢,你需要准备好一个Win8/ ...

  2. c++读取lua配置基础类

    一.内容介绍 把lua作为配置文件,里面的参数值的获取,在他人基础上做了修改,并且补充了一维数组的处理方式. 若有不足之处请多多指教. 对于二维数组,没有成功.希望大家继续补充和修改,非常感谢! 二. ...

  3. 小型机与pc服务器区别

    按CPU的类型来区分,小型机是基于RISC(精简指令集)架构的专用服务器,而服务器是基于CISC(复杂指令集)架构的PC服务器.小型机相对于普通服务器来说,一直有不可比拟的优势.(1)如必能稳定,它具 ...

  4. 18、x264编码在zedboard上的实现(软编码)

    一.x264开源包获取 x264-snapshot提供了开源x264源代码,已经在X86和ARM架构下均已实现.linux下可以使用git获得最新的代码包 git clone git://git.vi ...

  5. [慕课笔记]Node入口文件分析和目录初始化

    1:我们要在根目录下安装这些模块 2:然后来编写这些入口文件,这几行代码的大概意思是说,我引入一个express的模块,然后生成一个webview 的实例,将这个实例的监听端口设置成3000,然后就可 ...

  6. iOS开发项目实战——Swift实现ScrollView滚动栏功能

    手机作为一个小屏设备,须要显示的信息往往无法在一个屏幕上显示,此时就须要使用到滚动栏,当然除了像TableView这样能够自带滚动功能的. 假设一个界面上View较多,那就必须要使用到ScrollVi ...

  7. CleanCode代码整洁之道培训总结（2015-03-14）

    为期四天的CleanCode培训时间非常短.非常难准确掌握一些知识.但让我对代码有了一个又一次的认识和启示:之前也有看过设计模式.重构之类的书,看完之后也有一些感触,过后在写代码中还是不能应用进来,事 ...

  8. BZOJ 1588 HNOI2002 营业额统计 裸Treap

    题目大意:...题目描写叙述不全看这里好了 给定一个序列 对于每一个元素我们定义该数的最小波动值为这个数与前面全部数的差中的最小值(第一个数的最小波动值为第一个数本身) 求最小波动值之和 找近期的数仅 ...

  9. java用volatile或AtomicBoolean实现高效并发处理 (只初始化一次的功能要求)

    最近碰到一个这样的功能要求:怎么在一个类里面,实现高效并发处理下只可以初始化一次的方法? 实现方式: 1)volatile方式: /** * Created by Chengrui on 2015/7 ...

  10. linux下如何查找nginx配置文件的位置

    nginx的配置放在nginx.conf文件中,一般我们可以使用以下命令查看服务器中存在的nginx.conf文件. locate nginx.conf /usr/local/etc/nginx/ng ...