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

直接上代码:

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' ...

随机推荐

一些linux包相关命令
针对centos 查看CentOS版本方法: lsb_release -a #result------------ LSB Version: :base-4.0-amd64:base-4.0-noar ...
Ajax请求
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
Java获得键盘输入的两种方法
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
搭建Linux+Jexus+MariaDB+ASP.NET[LJMA]环境
备注:,将我的博客内容整理成册,首先会在博客里优先发布,后续可能的话整理成电子书,主要从linux的最基础内容开始进入Linux的Mono开发方面的话题.本文是我整理博客内容的一篇文章. LJMA 是 ...
UITableView（一）
#import <UIKit/UIKit.h> @interface ViewController : UIViewController<UITableViewDataSource, ...
Some practices to write better C#/.NET code（译）
C#(.NET)中有关编码的一些建议,原文地址:http://www.codeproject.com/Articles/539179/Some-practices-to-write-better-Cs ...
【单元测试】NUint使用详解及Visual Studio配置
阅读目录什么是单元测试? 为什么使用单元测试? NUint使用详解: 示例属性断言简单测试 VS配置: External Tools Visual Nunit 2010 NUnit Test ...
从Knockout到Angular的架构演变
2008年第一次在WPF中使用MVVM模式之后,就一直热衷于耦合隔离.模块化与重构.UI和逻辑分离.单元测试以及后面的领域模型.谈及MVVM模式,自己也开发过一套框架,但没有长期更新和维护,所以索性就 ...
ASP.NET MVC 从零开始 - Web.config
这篇文章是从我的 github 博客 http://lxconan.github.io 导入的. 在上一篇中,我们从零开始创建了一个非常简单的 ASP.NET MVC 应用程序.接下来,你是不是期望我 ...
java中构造方法的特殊性
构造方法名与类名相同构造方法没有返回值,也不能写void 构造方法的主要作用是完成对对象的初始化工作构造方法一般不由编程人员显示调用,而是由new来调用在创建一个类的对象的同时,系统会自动调用该 ...

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

CSS3 transition 属性

实例

定义和用法

语法

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

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

随机推荐

热门专题

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