先看看效果:其中鼠标悬浮在图片上会有动态效果图

直接上代码:

css文件

 @CHARSET "UTF-8";

 *{

     padding:0px;

     margin:0px;

 }

 div{

     font-family:"楷体";

     font-size:14px;

     color:#666

 }

 body

 {

     background-image:url("../img/background.jpg") ;

     background-size:cover;

 }

 .container{

     width:1100px;

     height:550px;

     margin:60px auto;

     position:relative;

 }

 .container img{

     position:absolute;

     padding:10px 10px 15px;

     background:#fff;

     border:1px solid #ddd;

     -webkit-transition:1s ;

     -moz-transition:1s ;

     transition:1s ;

     z-index:;

 }

 .container img:hover{

     -webkit-transform:rotate(0deg);

     -moz-transform:rotate(0deg);

     transform:rotate(0deg);

     -webkit-transform:scale(1.1);

     -moz-transform:scale(1.1);

     transform:scale(1.1);

     -webkit-box-shadow:5px 5px 5px #ddd;

     -moz-box-shadow:5px 5px 5px #ddd;

     box-shadow:5px 5px 5px #ddd;

     z-index:;

     cursor:pointer;

 }a

 .pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}

 .pic2{top:0px;left:600px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}

 .pic3{bottom:;right:;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}

 .pic4{bottom:;left:500px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}

 .pic5{bottom:;left:;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}

 .pic6{top:;left:;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}

 .pic7{top:;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}

 .pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}

 .pic9{top:150px;left:580px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}

 .pic10{left:180px;top:60px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);

Index.html文件:

 <html>

 <head>

 <title>CSS3动画相册 图片可倾斜摆放DEMO演示</title>

 <meta http-equiv="Content-Type" content="text/html;chatset=utf-8" />

 <link href="css/style1.css" rel="stylesheet" type="text/css" />

 </head>

 <body>

 <div class="container">

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

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

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

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

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

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

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

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

     <img src="img/mm9.jpg" class="pic9"  />

     <img src="img/mm10.jpg" class="pic10"  />

 </div>

 </body>

 </html>

需要注意的一些问题:

CSS3 transition 属性

实例

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div

{

width:100px;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property
transition-duration
transition-timing-function
transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

语法

transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

　transform: rotate(40deg); /* 其中40是旋转的角度 */

transition: width 2s;产生带有平滑改变width的过渡效果,完成过渡效果需要2秒

HTML5+CSS3实现图片可倾斜摆放的动画相册效果的更多相关文章

基于CSS3图片可倾斜摆放的动画相册
今天我们又要来分享一个CSS3动画相册.之前我们分享过一个很酷的放满女神的HTML5/CSS3相册,相册是全屏展示的.今天这款相册的特点是图片可以任意角度的倾斜摆放,就像随意放在桌面上一样.另外,当鼠 ...
10款基于HTML5+CSS3实现的超酷源码动画
1.基于Bootstrap的jQuery登录表单这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...
基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
css3实现图片划过一束光闪过效果
该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...
推荐一款超级漂亮的HTML5 CSS3的图片轮播器
最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...
HTML5/CSS3实现图片倒影效果
在线演示本地下载
CSS3——制作图片翻页的小动画
觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...} ...
黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)
CSS代码 .guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .gua ...
jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...

随机推荐

php 图片上传的公共方法（按图片宽高缩放或原图）
写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...
如何给GridView添加网格
如何给gridview的单元格加上分割线原文链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/1227/1582.html ...
IRP完成例程返回值理解
第一,完成例程里面直接返回STATUS_SUCCESS,这时候IRP已经继续向上回卷,失去了对IRP的控制. 第二,完成例程里面返回STATUS_MORE_PROCESSING_REQUIRED,仍具 ...
【实战Java高并发程序设计 5】让普通变量也享受原子操作
[实战Java高并发程序设计 1]Java中的指针:Unsafe类 [实战Java高并发程序设计 2]无锁的对象引用:AtomicReference [实战Java高并发程序设计 3]带有时间戳的对象 ...
IT人士必去的10个网站
1.Chinaunix 网址:http://www.chinaunix.net/ 简介:中国最大的linux/unix技术社区. 2.ITPub 网址:http://www.itpub.net/ 简介 ...
android培训机构排名
Android开发行业的热度打开了Android培训领域的市场,我们会发现有很多的Android培训机构都在大势宣传自己的师资.就业情况.教学环境等 ,然而到底要选择哪个呢?令很多的人困惑.2015年 ...
SQL Server 2016 CTP2.3 的关键特性
SQL Server 2016 CTP2.3 的关键特性数据库方面的增强 Row Level Security已经支持In-memory OLTP 表.用户现在可以对内存优化表实施row-level ...
基于AngularJS的企业软件前端架构[转载]
这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/ ...
纯命令行的编辑利器：用好 awk 与 sed
awk 的基本语法 awk 是模式查找与处理语言,是文本处理的利器.使用 awk 可以只用一条简单的命令完成复杂的文本数据处理. awk 命令的基本结构为: awk '模式 {处理}' 文件比如,打 ...
如何在没有域的环境中搭建AlwaysOn（一）
对DBA而言,不需要域就可以搭建SQL Server AlwaysOn是Windows Server 2016中最令人兴奋的功能了,它不仅可以降低搭建的成本,而且还减少了部署和运维的工作量. 该特性可 ...

HTML5+CSS3实现图片可倾斜摆放的动画相册效果

CSS3 transition 属性

实例

定义和用法

语法

transform: rotate(40deg); /* 其中40是旋转的角度 */

HTML5+CSS3实现图片可倾斜摆放的动画相册效果的更多相关文章

随机推荐

热门专题

　transform: rotate(40deg); /* 其中40是旋转的角度 */