预赛

  • 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. OC的DES加密，使与java的Cipher类用DES/CBC/PKCS5Padding方式的加密结果同样

    问题说明: 近期用到DES加密,而且要与java的Cipher类加密的结果保持一致.没研究过java的Cliper,但工作中Cipher依据DES/CBC/PKCS5Padding加密方式生成了一个字 ...

  2. java.lang.IllegalArgumentException: org.hibernate.hql.internal.ast.QuerySyntaxException: student is not mapped

    Spring 5.0 +Jpa,使用@Query实现 自定义查询报错: java.lang.IllegalArgumentException: org.hibernate.hql.internal.a ...

  3. 【习题 5-8 UVA - 230】Borrowers

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用map+set写个模拟就好. 3个区域 书架.桌子.别人的手上. 其中前两个区域的书都能借出去. [代码] #include &l ...

  4. Setup iOS Development Environment.

    Setup iOS Development Environment Install XCode and check-out source code from SVN XCode Please find ...

  5. 如何搭建自己CDN服务器

    转载:http://server.zzidc.com/fwqpz/587.html 目前在免费CDN市场上,360因为“免费”而越做越大,加速乐做的很早.但因免费的节点不多,好多用户都被强走了.安全宝 ...

  6. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  7. [内核编程] 键盘过滤第一个例子ctrl2cap（4.1~4.4）汇总，测试

    键盘过滤第一个例子ctrl2cap(4.1~4.4)汇总,测试 完整源代码 /// /// @file ctrl2cap.c /// @author wowocock /// @date 2009-1 ...

  8. Android RadioGroup的RadioButton 选择改变字体颜色和背景颜色

    RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...

  9. Android 带文字的图片分享

    这里也记录下上下文,因为做了一个失物招领的App,当有人上交了失物之后,可以将这个消息分享出去,这个消息内容有物品的信息和图片,而微信SDK始终无法做到,就想着把物品信息嵌入到图片中分享出去,先放一个 ...

  10. mybatis结合log4j打印SQL日志

    mybatis结合log4j打印SQL日志 1.Maven引用jar包 默认的mybatis不能打印出SQL日志,不便于查看调试,须要结合log4jdbc-log4j2就能够完整的输入SQL的调试信息 ...