代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>照片墙</title>

        <style>

            *{

                background: #eee;

                margin: 0px;

                padding: 0px;

                position:absolute;

            }

            .qiang{

                width: 960px;

                height: 450px;

            }

            .qiang img{

                width: 200px;

                margin: 20px 20px 30px;

                padding: 15px 15px 30px;

                border: solid 1px #fff;

                /*边框阴影*/

                box-shadow: 5px 5px 8px rgba(50,50,50,0.4);

                background-color: #fff;

                /*缩放动画效果*/

                transition: all 0.5s ease-in-out;

                -webkit-transition: all 0.5s ease-in-out;

            }

            .qiang img:hover{

                transform:rotate(0deg);

                /*角度调整为零，放大1.5倍;*/

                -webkit-transform:rotate(0deg) scale(1.5);

                z-index: 99;

            }

            .pic1{

                transform: rotate(-5deg);

                -webkit-transform: rotate(-5deg);

            }

            .pic2{

                left: 240px;

                -webkit-transform: rotate(7deg);

            }

            .pic3{

                left: 500px;

                -webkit-transform: rotate(-11deg);

            }

            .pic4{

                left: 750px;

                -webkit-transform: rotate(-13deg);

            }

            .pic5{

                top: 300px;

                transform: rotate(-5deg);

                -webkit-transform: rotate(-6deg);

            }

            .pic6{

                left: 240px;

                top: 300px;

                -webkit-transform: rotate(9deg);

            }

            .pic7{

                left: 500px;

                top: 300px;

                -webkit-transform: rotate(-4deg);

            }

            .pic8{

                left: 750px;

                top: 300px;

                -webkit-transform: rotate(-6deg);

            }

        </style>

    </head>

    <body>

        <div class="qiang">

            <img class="pic1" src="img/1.jpg" />

            <img class="pic2" src="img/2.jpg" />

            <img class="pic3" src="img/3.jpg" />

            <img class="pic4" src="img/4.jpg" />

            <img class="pic5" src="img/5.jpg" />

            <img class="pic6" src="img/6.jpg" />

            <img class="pic7" src="img/7.jpg" />

            <img class="pic8" src="img/8.jpg" />

        </div>

    </body>

</html>

CSS3 简易照片墙的更多相关文章

  1. CSS3简易表盘时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3简易实现图标动画由小到大逐个显现

    在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现.这种效果很有视觉冲击力,显著提高关注度~ 原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit ...

  3. css3 简易时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML5/CSS3简易版俄罗斯方块游戏

    在线演示 本地下载

  5. 一款简易的CSS3扁平化风格联系表单

    CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...

  6. 纯洁CSS3实现图片墙

    预赛 DIV+CSS基金会 CSS3的transform 和 transition说明 主要用于transform的rotate/scale 动画过渡的几个參数(transition-property ...

  7. 基于CSS3图片可倾斜摆放的动画相册

    今天我们又要来分享一个CSS3动画相册.之前我们分享过一个很酷的放满女神的HTML5/CSS3相册,相册是全屏展示的.今天这款相册的特点是图片可以任意角度的倾斜摆放,就像随意放在桌面上一样.另外,当鼠 ...

  8. 10款很酷的HTML5动画和实用的HTML5应用

    1.HTML5的画布花朵生成器可生成多种样式的花朵 HTML5非常流行,利用HTML5制作动画也非常方便,今天要分享一款利用HTML5 Canvas制作的花朵生成器,我们只需要在Canvas画布上点击 ...

  9. 10款精美的HTML5表单登录联系和搜索表单

    1.HTML5/CSS3仿Facebook登录表单 这款纯CSS3发光登录表单更是绚丽多彩.今天我们要分享一款仿Facebook的登录表单,无论从外观还是功能上说,这款登录表单还是挺接近Faceboo ...

随机推荐

  1. 【IPC通信】基于管道的popen和pclose函数

    http://my.oschina.net/renhc/blog/35116 [IPC通信]基于管道的popen和pclose函数 恋恋美食  恋恋美食 发布时间: 2011/11/12 23:20 ...

  2. Linux学习笔记5-搭建内网Yum源

    一.安装Nginx  1.安装依赖: [root@nodeSource local]# yum install gc-devel gcc-c++ pcre-devel zlib-devel 2.解压N ...

  3. Android 多线程：使用Thread和Handler (从网络上获取图片)

    当一个程序第一次启动时,Android会同时启动一个对应的主线程(Main Thread),主线程主要负责处理与UI相关的事件,如:用户的按键事件,用户接触屏幕的事件以及屏幕绘图事件,并把相关的事件分 ...

  4. 多进程用户并发处理Demo（C#版）

    这个示例主要演示的是在多进程操作数据库时,如何避免并发重复数据入库的例子. 过多的线程理论不再阐述,网上.书上皆有. 项目采用 Asp.Net Framework 4.5 / Mysql 5.4 数据 ...

  5. 【水：最长公共子序列】【HDU1159】【Common Subsequence】

    Common Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. WisDom .net 工作流设计流程

    1.简单说明       工作流( Foundare WorkFlow)说白了就是工作流程的一些计算机模型,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以恰当的模型进行表示并对其实施计 ...

  7. javascript模式——Factory

    Facotry模式是一种创建型模式,他不同于一般编码习惯,显示的调用各个构造函数.Factory模式是提供一个通用的接口来创建对象. 一个Factory模式压缩所有对象创建的方式,降低这个工厂与其它对 ...

  8. iOS学习心得——UINavigationController

            UINavigationController和UItableviewController一样也是iOS开发中常用的控件之一,今天就来学习一下它的常见用法.         有人说tab ...

  9. javascript 正则表达式代码

    正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表 ...

  10. javascript二级联动

    二级联动在一般的网页中随处可见,一般是地址,比如点击浙江省,随后出现的是杭州市,嘉兴市:点击北京省出现的是朝阳,海淀,而不是出现杭州,嘉兴. 要想实现这个步骤,就要用到javascript来实现.其中 ...