代码

<!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. OpenFileDialog 害人的RestoreDirectory

    莫名其妙出现找不到文件的错误.经查,发现: OpenFileDialog,SaveFileDialog在选择文件后,会切换当前程序目录的路径(System.Environment.CurrentDir ...

  2. Eclipse被汉化后恢复EN模式

    问题描述: 在安装Flush builder 的时候安装了汉化包,导致Eclipse中功能显示为汉字. 问题解决: 在Eclipse快捷方式下“目标”路径中添加-nl "EN"即可 ...

  3. UVA11988 Broken KeyBoard

    链表的思想很简单,要做到活用也不难.一般我是这样做得,从实际问题出发,先高度的概括符不符合链表的特点.能不能用链表简单解决.接着,就是编码.链表编码要理清细节性思路,最好是简单的画下图,正如改题的链表 ...

  4. CoreData多表操作.

    这次给大家带来的是CoreData多表操作的使用. 首先我们要对CoreData来进行多表操作我们先要创建至少两个实体在工程中. 在创建完成这两个对应的工程实体文件和工程中的类文件后我们现在需要创建一 ...

  5. 命令行运行命令时报错You don&#39;t have write permissions for the /Library/***

    这是由于要运行这些操作时必须有管理员的权限(比方更新软件),比方更新cocoapods时报错 soindy:SmartThermo soindy$ gem install cocoapods Fetc ...

  6. Chrome for Android在Chromium代码库中的提交patch

    訪问这个地址: https://codereview.chromium.org/1141283003 主要分为3类:png资源文件.java代码.C++代码,曾经以为这部分不开源的代码主要是C++,事 ...

  7. 开源 java CMS - FreeCMS2.3 移动app生成首页数据

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/28160.html​ 项目地址:http://www.freeteam.cn/ 生成首页数据 ...

  8. XP用户：消除误解，大胆拥抱Linux

         4月23日.知名家评论家Silviu Stahie发表文章.题为"Windows Users and Their Misconceptions About Linux". ...

  9. js 获取asp:dropdownlist选中的值

    var eSection = document.getElementById("<%=tx_ddlType.ClientID%>"); var eSectionValu ...

  10. phpStorm注册马码

    phpstorm已经升级到10.0,原注册码失效,10.0注册方法:注册时选择“License server”输入 http://idea.lanyus.com/ 此工具类工具一直没有让我失望