代码

<!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. codevs1040 统计单词个数

    题目描述 Description 给出一个长度不超过200的由小写英文字母组成的字母串(约定;该字串以每行20个字母的方式输入,且保证每行一定为20个).要求将此字母串分成k份(1<k<= ...

  2. Vis.js图表插件

    Vis.js是一款基于JavaScript的可视化图表库,Vis.js不像其他的图表库那样仅仅支持几种常用的数据图表,比如线形图.柱状图.饼图等,Vis.js支持上百种不同类型的可视化图表类型,比如时 ...

  3. Google map v3 using simple tool file google.map.util.js v 1.2

    更新添加日志:在1.1的基础上添加marker的文字显示.测距工具. /** * GOOGLE地图开发使用工具 * @author BOONYACHENGDU@GMAIL.COM * @date 20 ...

  4. tty/pts 相关指令

    http://unix.stackexchange.com/questions/136662/how-can-we-know-whos-at-the-other-end-of-a-pseudo-ter ...

  5. 项目中常用方法总结（将将DataTable数据集映射到实体对象）【转】

    本篇把项目中用到的一些通用方法总结出来, 这些方法因为经常需要在项目中用到,所以把它们归纳在一起, 形成一个.dll 文件是一个理想的选择. 这样也便于日后缩短开发周期. 一. 把一个DataGrid ...

  6. _itemFailedToPlayToEnd: { kind = 1; new = 2; old = 0; }

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenVveW91MTMxNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  7. 用HTML5、地理定位API和Web服务来开发移动应用

    HTML 5 是一项让人振奋的技术,这有着充分的理由.这将会是一次技术突破,因为它可以将桌面应用程序功能带入浏览器中.除了传统浏览器外,对于移动浏览器,其潜力甚至更大.不仅如此,最流行的移动浏览器甚至 ...

  8. C#识别图片上的数字

    通过Emgu实现对图片上的数字进行识别. 前期步骤: 1.下载Emgu安装文件,我的版本是2.4.2.1777.3.0版本则实现对中文的支持. 2.安装后需填写环境变量,环境变量Path值后加入Emg ...

  9. OpenProcess() 函数

    方法名称:OpenProcess 位置:Kernel32.dll OpenProcess 函数用来打开一个已存在的进程对象,并返回进程的句柄. 使用外部函数首先需导入命名空间: System.Runt ...

  10. php 截取字符串

    /** * 方法库-截取字符串-[该函数作者未知] * @param string $string 字符串 * @param int $length 字符长度 * @param string $dot ...