代码

<!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. PF_RING packet overwrites

    最近在用 PF_RING 抓包过程中,发现个灵异的现象,高流量丢包时, 经常会出现正在处理的包的内容被覆盖.开始,怀疑是不是自己程序有地方越界写了,后来发现,如果自己拷贝一份,然后处理拷贝的那份,永远 ...

  2. hdu 1010 Tempter of the Bone 深搜+剪枝

    Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  3. poj 1734 Sightseeing trip_ 最小环记录路径

    题意:求最出小环,输出路径 #include <iostream> #include<cstdio> using namespace std; #define N 110 #d ...

  4. CentOS7 lamp安装 centoOS6 lamp

    快速lamp安装 How To Install Linux, Apache, MySQL, PHP (LAMP) stack On CentOS 7 Introduction A "LAMP ...

  5. [AS3]as3用ByteArray来对SWF文件编码加密实例参考

    [AS3]as3用ByteArray来对SWF文件编码加密实例参考,简单来说,就是将 swf 以 binary 的方式读入,并对 ByteArray 做些改变,再重新存成 swf 档.这个作业当然也可 ...

  6. win7下安装Ubuntukylin-14.04双系统

    工具准备: 下载ISO系统镜像,UltraISO,EasyBCD,分区助手,8G 优盘 U盘启动制作流程: 1,打开分区助手,从硬盘中分出空闲空间(60G)作为Ubuntu工作空间,文件系统设为Ext ...

  7. Kafka的可靠性问题

    a. Producer到broker 把request.required.acks设为1,丢会重发,丢的概率很小 b. Broker b.1 对于broker,落盘的数据,除非磁盘坏了,不会丢的 b. ...

  8. 基本文件的I/O

    System.IO命名空间包含允许在数据流和文件上进行同步,异步及写入的类型.文件是一些永久存储及具有特定顺序的字节组成的一个有序的,具有名称的集合.与文件有关的概念是目录路径和磁盘存储等.流提供了一 ...

  9. 从头开始－03.C语言中数据类型

    基本数据类型 整形: Int 4字节 %d / %i Short 2字节 %hd Long 8字节 %ld Longlong 8字节 %lld Unsigned 4字节 % 浮点型 单精度 Float ...

  10. 配置文件的读取添加webconfig

    webconfig.xml的配置文件内容挺丰富的,在这篇文章里笔者只对AppSettings这个节点进行配置文件读取和添加 public class ConfigurationRef { /// &l ...