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

直接上代码:

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实现图片可倾斜摆放的动画相册效果的更多相关文章

  1. 基于CSS3图片可倾斜摆放的动画相册

    今天我们又要来分享一个CSS3动画相册.之前我们分享过一个很酷的放满女神的HTML5/CSS3相册,相册是全屏展示的.今天这款相册的特点是图片可以任意角度的倾斜摆放,就像随意放在桌面上一样.另外,当鼠 ...

  2. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  3. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  4. css3实现图片划过一束光闪过效果

    该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...

  5. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

  6. HTML5/CSS3实现图片倒影效果

    在线演示 本地下载

  7. CSS3——制作图片翻页的小动画

    觉得还挺有意思的嘻嘻~ 这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug: 这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法: 在.pic, .info{...} ...

  8. 黄聪：css3实现图片划过一束光闪过效果(图片光影掠过效果)

    CSS代码 .guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;} .gua ...

  9. jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示

    <!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...

随机推荐

  1. int与string类型的转换

    在SQL语句中 在JS中, (1) var   x=100    a   =   x.toString()   (2) var   x=100;    a   =   x   +"" ...

  2. Java面向对象课程小结

    1.什么是对象?什么是类? 类和对象的关系 定义类的方法 方法五要素 new关键字 引用类型变量的赋值 null和nullException null大小写的区别 2.方法 重载和重写 构造 方法,带 ...

  3. checkbox选中状态不被改变

    让它的状态只能看不能改变,加上onclick="return false;". 也可以disabled="true";但是这个颜色变淡了; <input ...

  4. sqlserver sp模板

    某公司内部的sp模板 create procedure [usp_my_procedure_name] as begin set nocount on; declare @trancount int; ...

  5. Centos7下安装mono3.10.0

    mono 3.10.0 正式发布:性能进一步改进,以前已经写过一篇  Centos 7.0 安装Mono 3.4 和Jexus 5.6.下面我们在CentOS 7上通过源码安装Mono 3.10, 需 ...

  6. NEsper Nuget包

    Esper是专门进行复杂事件处理(CEP)的流处理平台,Java版本为Esper,.Net版本为NEsper.Esper & NEsper可以方便开发者快速开发部署处理大容量消息和事件的应用系 ...

  7. Expert 诊断优化系列------------------冤枉磁盘了

    现在很多用户被数据库的慢的问题所困扰,又苦于花钱请一个专业的DBA成本太高.软件维护人员对数据库的了解又不是那么深入,所以导致问题迟迟不能解决,或只能暂时解决不能得到根治.开发人员解决数据问题基本又是 ...

  8. MySQL HASH分区

    200 ? "200px" : this.width)!important;} --> 介绍 基于给定的分区个数,将数据分配到不同的分区,HASH分区只能针对整数进行HASH ...

  9. 你可能不知道的7个CSS单位

    如果你是一名前端开发工程师,一般px和em使用频率比较高.但是今天本文的重点是介绍一些我们使用很少.甚至么有听说的单位. 一.重温em <style type="text/css&qu ...

  10. Java 8函数编程轻松入门

    函数接口介绍 在Java1.8中,新增了Lambda表达式.在.net3.5(C# 3.0)在原先的匿名方法基础上演变出了Lambda表达式.学过C# Lambda表达式的同学,对于Java的Lamb ...