代码

<!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. H264 编码详解

    H264 编码详解(收集转载) (1)       x264_param_default( x264_param_t *param ) 作用: 对编码器进行参数设定 cqm:量化表相关信息 csp: ...

  2. 【递推+矩阵快速幂】【HDU2604】【Queuing】

    Queuing Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  3. ChartConlrol二维图表类型

    WinForms Controls >Controls > Chart Control > Concepts > Creating Charts > 2D Chart T ...

  4. 【27前端】背景半透明rgba LESS实践

    今天有看到司徒正美<背景半透明rgba最佳实践>的文章和里面推荐的一个在线工具CSS背景颜色属性值转换  . 于是联系到自己的less库,新技能Get. 内容如下: /*在你的less库中 ...

  5. 12款令程序员惊叹的CSS3效果库

    最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...

  6. hdu2222Keywords Search

    Problem Description In the modern time, Search engine came into the life of everybody like Google, B ...

  7. zookeeper_02：zookeeper基础

    ZooKeeper基础概述 ZooKeeper维护一个小型的数据节点,这些节点被称为znode,采用类似于文件系统的层级树状结构进行管理. 针对一个znode,没有数据常常表达了重要的信息.比如,在主 ...

  8. Android 获取系统图库和相机照片 裁剪并显示

    接上一篇 package com.example.image; import android.app.Activity; import android.content.Intent; import a ...

  9. java Timer 使用小结

    Java自带的java.util.Timer类,通过调度一个java.util.TimerTask任务.这种方式可以让程序按照某一个频度执行,但不能指定时间运行.用的较少. 任务的调用通过起的子线程进 ...

  10. nginx，wsgi，flask之间的关系

    之前看写flask 应用的一些疑问,百度上的答案解释的不错,这里记着以后可以看看Web 服务器层对于传统的客户端 - 服务器架构,客户端向服务器发送请求,服务器接收请求,处理请求,最后给客户端返回请求 ...