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

直接上代码:

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. ScrollView嵌套RecyclerView时滑动出现的卡顿

    原文连接:http://zhanglu0574.blog.163.com/blog/static/113651073201641853532259/   现象: 一个界面有多个RecyclerView ...

  2. 谢欣伦 - 原创软件 - 游戏专题 - 我的桌面My Desktop

    今天在网上看到一个用桌面背景当做拼图内容的游戏很新颖,反正今天下雨我也闲着,索性用了半天时间做了一个类似的游戏<MyDesktop>.做完后立即分享给了两个朋友,他俩都被吓坏了.现在分享给 ...

  3. 分区里的inode号是0号和1号的block

    分区里的inode号是0号和1号的block 我相信大家在使用Linux的时候都遇到过误删文件系统数据的情况,不管是自己误删还是帮人家恢复误删 现在用的比较多的恢复工具大概是ext3grep .ext ...

  4. MySQL 数据库事务与复制

    好久没有写技术文章了,因为一直在思考 「后端分布式」这个系列到底怎么写才合适. 最近基本想清楚了,「后端分布式」包括「分布式存储」和 「分布式计算」两大类. 结合实际工作中碰到的问题,以寻找答案的方式 ...

  5. iOS开发系列—Objective-C之内存管理

    概述 我们知道在程序运行过程中要创建大量的对象,和其他高级语言类似,在ObjC中对象时存储在堆中的,系统并不会自动释放堆中的内存(注意基本类型是由系统自己管理的,放在栈上).如果一个对象创建并使用后没 ...

  6. [.net 面向对象程序设计进阶] (16) 多线程(Multithreading)(一) 利用多线程提高程序性能（上）

    [.net 面向对象程序设计进阶] (16) 多线程(Multithreading)(一) 利用多线程提高程序性能(上) 本节导读: 随着硬件和网络的高速发展,为多线程(Multithreading) ...

  7. 一个Java程序员的实习总结（2）

    在今天的总结里,主要讲述第二.三周这半个月的培训情况,并且穿插讲讲我对实习和见习的看法,有需要有兴趣的童鞋可以看看. 半个月的见习 其实我更愿意把实习和见习分开讲,实习指的是还没签三方或者直接就是大三 ...

  8. Azure PowerShell (12) 通过Azure PowerShell创建SSH登录的Linux VM

    <Windows Azure Platform 系列文章目录> 本章将介绍如何使用Azure PowerShell,创建SSH登录的Linux VM 前提要求: 1.安装Azure Pow ...

  9. struts1一:基本简介

    struts是开源框架.使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时间.如果我们想混合使用Servlets和JSP的优点来建立可扩展的应用,struts是一个不错的 ...

  10. 2013 duilib入门简明教程 -- 其他 (18)

    一.超链接按钮      代码很简单,参见360Demo:      <Button text="{u}{a}求助{/a}{/u}" showhtml="true& ...