预赛

  • 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. Range锁（也即范围锁）

    浅析SQL Server在可序列化隔离级别下,防止幻读的范围锁的锁定问题 本文出处:http://www.cnblogs.com/wy123/p/7501261.html (保留出处并非什么原创作品权 ...

  2. [Angular2] Map keyboards events to Function

    The idea is when we tape the arrow keys on the keyboard, we want the ball move accodingly. const lef ...

  3. 小雷FansUnion：我有了第一个付费客户(第一个徒弟)

    很高兴地告诉大家一个振奋人心的消息,我刚刚拥有了第一个付费客户. 第一个付费客户是山东青岛的一个上班族,有2年.Net经验,今年转Java开发.对我比较信任,在我的建议下,选择了"拜师学艺& ...

  4. Linux下图形界面调试工具kdbg安装及測试

    1.Ubuntu系统下安装 Ubuntu系统安装比較方便,直接apt-get即可 apt-get install kdbg 2.centos 安装 首先,在这个地址下下载rpm包.然后使用rpm命令安 ...

  5. php实现求二进制中1的个数（右移、&、int32位）（n = n & (n - 1);）

    php实现求二进制中1的个数(右移.&.int32位)(n = n & (n - 1);) 一.总结 1.PHP中的位运算符和java和c++一样 2.位移运算符看箭头方向,箭头向左就 ...

  6. hibernate框架简单步骤

    Demo.java package com.itheima.test; import org.hibernate.Session; import org.hibernate.SessionFactor ...

  7. mysql的四种启动方式

    查看该版本的相应参数: mysqld --verbose --help     1.mysqld  ./mysqld --defaults-file=/etc/my.cnf --user=mysql ...

  8. SpringMVC中跳转路径的问题

    1. @RequestMapping 1)@RequestMapping既可以作用于类,也可以作用于方法 2)@RequestMapping中value值(即跳转的路径),可以加 "/&qu ...

  9. php如何实现万年历的开发（每日一课真是非常有效率）

    php如何实现万年历的开发(每日一课真是非常有效率) 一.总结 一句话总结: 1.判断每月有多少天: 通过data函数来判断,$days=date('t',$firstday); 2.判断每月的第一天 ...

  10. 百度UEditor上传图片-再总结一次

    晚上,在继续开发BriefCMS,把百度UEditor上传图片的问题,给解决了,终于解决了. 公司极简版CMS.BriefCMS.个人官网,最近2个月,与百度UEditor厮杀了好久.最值得吐槽的,就 ...