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

直接上代码:

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. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  2. C/C++编译和链接过程详解 (重定向表，导出符号表，未解决符号表)

    详解link  有 些人写C/C++(以下假定为C++)程序,对unresolved external link或者duplicated external simbol的错误信息不知所措(因为这样的错 ...

  3. final关键字(final是最终的)

    final关键字(final是最终的) 1.final修饰特点 a.修饰类,类不能被继承 b.修饰变量,变量就变成了常量, 修饰基本数据类:final int num = 10; 修饰引用数据类型变量 ...

  4. 初学java之12 泛型编程的个人理解总结

    首先,强调一个观点: 对于我这样的初学者,一定要站在虚拟机和编译器的角度来分析java 语言的种种特性,泛型也不例外.(我认为这个一条正确的学习经验) 写这篇文章起源于最近在学java,有一天在路上和 ...

  5. C#如何测试代码运行时间

    1.System.Diagnostics.Stopwatch stopwatch = new Stopwatch(); stopwatch.Start(); // 开始监视代码运行时间 // 需要测试 ...

  6. ORA-01861: 文字与格式字符串不匹配

    问题:插入数据不成功 解决:借口实现类里面的sql语句带值放到数据库中运行,如果不成功是sql语句的错误.

  7. .NET面试题系列[14] - LINQ to SQL与IQueryable

    .NET面试题系列目录 名言警句 "理解IQueryable的最简单方式就是,把它看作一个查询,在执行的时候,将会生成结果序列." - Jon Skeet LINQ to Obje ...

  8. ABP理论学习之仓储

    返回总目录 本篇目录 IRepository接口 查询 插入 更新 删除 其他 关于异步方法 仓储实现 管理数据库连接 仓储的生命周期 仓储最佳实践 Martin Fowler对仓储的定义 位于领域层 ...

  9. CI-持续集成（1）-软件工业“流水线”概述

    CI-持续集成(1)-软件工业“流水线”概述 1   概述 持续集成(Continuous integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次, ...

  10. 剑指Offer面试题：21.从上到下打印二叉树

    一.题目:从上到下打印二叉树 题目:从上往下打印出二叉树的每个结点,同一层的结点按照从左到右的顺序打印.例如输入下图中的二叉树,则依次打印出8.6.10.5.7.9.11. 二叉树节点的定义如下,采用 ...